/* =============================================
   InjurySOS — Design Tokens
   ============================================= */
/* ============================================================
   Injury SOS — Webfonts
   Brand fonts are substituted with the closest Google Fonts match,
   self-served via Fontsource CDN (CORS-enabled, stable woff2).
   - Display / brand voice:  Poppins  (geometric, confident, friendly)
   - Body / UI text:         DM Sans   (neutral, warm, highly legible)
   - Data / numerals:        IBM Plex Mono (case #s, phone, timestamps)
   ⚠ If you have the real Injury SOS brand fonts, drop the files in
   assets/fonts/ and repoint these src() URLs.
   ============================================================ */

/* ---------- Poppins (display) ---------- */
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("https://cdn.jsdelivr.net/fontsource/fonts/poppins@latest/latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("https://cdn.jsdelivr.net/fontsource/fonts/poppins@latest/latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("https://cdn.jsdelivr.net/fontsource/fonts/poppins@latest/latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("https://cdn.jsdelivr.net/fontsource/fonts/poppins@latest/latin-700-normal.woff2") format("woff2");
}

/* ---------- DM Sans (body / UI) ---------- */
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("https://cdn.jsdelivr.net/fontsource/fonts/dm-sans@latest/latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("https://cdn.jsdelivr.net/fontsource/fonts/dm-sans@latest/latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("https://cdn.jsdelivr.net/fontsource/fonts/dm-sans@latest/latin-700-normal.woff2") format("woff2");
}

/* ---------- IBM Plex Mono (data) ---------- */
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("https://cdn.jsdelivr.net/fontsource/fonts/ibm-plex-mono@latest/latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("https://cdn.jsdelivr.net/fontsource/fonts/ibm-plex-mono@latest/latin-500-normal.woff2") format("woff2");
}

/* ============================================================
   Injury SOS — Color Tokens
   Pulled from the brand swatch sheet (Pantone-derived sRGB/hex).
   Base ramps are extended in oklch to stay harmonious with the
   five core brand colors.
   ============================================================ */
:root {
  /* ---------- Core brand (from swatch sheet) ---------- */
  --brand-navy:    #384289;  /* P 102-8C  — deep brand blue, authority   */
  --brand-cyan:    #009bdf;  /* P 115-8C  — primary action, the "signal" */
  --brand-sky:     #57b4dc;  /* P 115-13C — soft accent, calm            */
  --brand-gray:    #b4b4b4;  /* P 179-5C  — neutral mid                  */
  --brand-lime:    #cdd325;  /* P 163-8C  — highlight / "go"             */

  /* ---------- Navy ramp ---------- */
  --navy-50:  #eef0f7;
  --navy-100: #d6daed;
  --navy-200: #aab1d6;
  --navy-300: #7a85bd;
  --navy-400: #555fa0;
  --navy-500: #384289;  /* === brand-navy */
  --navy-600: #2e376f;
  --navy-700: #232a56;
  --navy-800: #181d3c;
  --navy-900: #0f1228;

  /* ---------- Cyan ramp (signal blue) ---------- */
  --cyan-50:  #e3f5fd;
  --cyan-100: #bce6fa;
  --cyan-200: #7fd0f4;
  --cyan-300: #3bb7ec;
  --cyan-400: #11a6e4;
  --cyan-500: #009bdf;  /* === brand-cyan */
  --cyan-600: #0081bd;
  --cyan-700: #006698;
  --cyan-800: #014e76;
  --cyan-900: #073b58;

  /* ---------- Sky ramp ---------- */
  --sky-100: #e3f1f9;
  --sky-300: #9fd0e9;
  --sky-500: #57b4dc;  /* === brand-sky */
  --sky-700: #3a8cb0;

  /* ---------- Lime ramp ---------- */
  --lime-100: #f4f6cf;
  --lime-300: #e0e676;
  --lime-500: #cdd325;  /* === brand-lime */
  --lime-700: #9aa00f;

  /* ---------- Neutral ramp (cool gray, tuned to brand-gray) ---------- */
  --neutral-0:   #ffffff;
  --neutral-25:  #fafbfc;
  --neutral-50:  #f4f6f9;
  --neutral-100: #e9edf2;
  --neutral-200: #d9dee6;
  --neutral-300: #c2c9d3;
  --neutral-400: #b4b4b4;  /* === brand-gray */
  --neutral-500: #8b929c;
  --neutral-600: #6a717c;
  --neutral-700: #4c5360;
  --neutral-800: #333944;
  --neutral-900: #1d222b;

  /* ---------- Status ---------- */
  --success-50:  #e7f6ee;
  --success-500: #1e9e63;
  --success-700: #167049;
  --warning-50:  #fff4e0;
  --warning-500: #e8920c;
  --warning-700: #a9640a;
  --danger-50:   #fde8ee;
  --danger-500:  #d8264f;
  --danger-700:  #a01539;
  --info-50:     var(--cyan-50);
  --info-500:    var(--cyan-500);

  /* ============================================================
     Semantic aliases — reference these in components, not raw ramps
     ============================================================ */

  /* Surfaces */
  --surface-page:      var(--neutral-50);
  --surface-card:      var(--neutral-0);
  --surface-sunken:    var(--neutral-100);
  --surface-inverse:   var(--navy-700);
  --surface-brand:     var(--navy-500);
  --surface-accent:    var(--cyan-500);

  /* Text */
  --text-strong:    var(--navy-700);
  --text-body:      var(--neutral-800);
  --text-muted:     var(--neutral-600);
  --text-subtle:    var(--neutral-500);
  --text-on-brand:  var(--neutral-0);
  --text-on-accent: var(--neutral-0);
  --text-link:      var(--cyan-600);

  /* Borders / lines */
  --border-subtle:  var(--neutral-200);
  --border-default: var(--neutral-300);
  --border-strong:  var(--neutral-400);
  --border-brand:   var(--cyan-500);
  --focus-ring:     var(--cyan-400);

  /* Action — primary = the cyan "signal" */
  --action-primary:        var(--cyan-500);
  --action-primary-hover:  var(--cyan-600);
  --action-primary-press:  var(--cyan-700);
  --action-secondary:      var(--navy-500);
  --action-secondary-hover:var(--navy-600);
  --action-secondary-press:var(--navy-700);

  /* Pipeline / case-status accents (PI ops domain) */
  --status-new:       var(--cyan-500);
  --status-contacted: var(--sky-500);
  --status-retained:  var(--success-500);
  --status-treating:  var(--brand-navy);
  --status-urgent:    var(--danger-500);
  --status-stalled:   var(--warning-500);
}

/* ============================================================
   Injury SOS — Typography Tokens
   Display/brand = Poppins · Body/UI = DM Sans · Data = IBM Plex Mono
   ============================================================ */
:root {
  /* ---------- Families ---------- */
  --font-display: "Poppins", "Segoe UI", system-ui, sans-serif;
  --font-body:    "DM Sans", "Segoe UI", system-ui, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;

  /* ---------- Weights ---------- */
  --fw-regular:  400; /* @kind font */
  --fw-medium:   500; /* @kind font */
  --fw-semibold: 600; /* @kind font */
  --fw-bold:     700; /* @kind font */

  /* ---------- Type scale (1.250 major-third-ish, tuned) ---------- */
  --text-2xs:  11px;
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-md:   18px;
  --text-lg:   20px;
  --text-xl:   24px;
  --text-2xl:  30px;
  --text-3xl:  38px;
  --text-4xl:  48px;
  --text-5xl:  60px;
  --text-6xl:  76px;

  /* ---------- Line heights ---------- */
  --leading-tight:   1.1;
  --leading-snug:    1.25;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  /* ---------- Letter spacing ---------- */
  --tracking-tight:   -0.02em;
  --tracking-normal:  0em;
  --tracking-wide:    0.04em;
  --tracking-wider:   0.08em;
  --tracking-label:   0.14em;  /* the PHONE / E-MAIL all-caps label look */

  /* ---------- Semantic roles ---------- */
  --display-font:   var(--font-display);
  --display-weight: var(--fw-bold);
  --heading-font:   var(--font-display);
  --heading-weight: var(--fw-semibold);
  --body-font:      var(--font-body);
  --label-font:     var(--font-display);
  --eyebrow-font:   var(--font-display);
}

/* ============================================================
   Injury SOS — Spacing & Layout Tokens
   4px base grid.
   ============================================================ */
:root {
  --space-0:   0;
  --space-px:  1px;
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;
  --space-32:  128px;

  /* Layout */
  --container-sm:  640px;
  --container-md:  860px;
  --container-lg:  1140px;
  --container-xl:  1320px;
  --gutter:        24px;
  --section-y:     96px;
}

/* ============================================================
   Injury SOS — Effects: radii, borders, shadows, motion
   The brand's signature shape is the concentric "SOS pulse" —
   rings echo outward. Radii are generous and soft (see the
   business card's rounded swatches). Shadows are cool-tinted,
   never neutral-black.
   ============================================================ */
:root {
  /* ---------- Radii ---------- */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-2xl:  32px;
  --radius-pill: 999px;
  --radius-card: var(--radius-lg);

  /* ---------- Border widths ---------- */
  --border-hair: 1px;
  --border-thick: 2px;
  --border-accent: 4px;   /* the navy block accent on the business card */

  /* ---------- Shadows (cool navy-tinted, soft) ---------- */
  --shadow-xs:  0 1px 2px rgba(15, 18, 40, 0.06);
  --shadow-sm:  0 1px 3px rgba(15, 18, 40, 0.08), 0 1px 2px rgba(15, 18, 40, 0.04);
  --shadow-md:  0 4px 12px rgba(15, 18, 40, 0.08), 0 2px 4px rgba(15, 18, 40, 0.04);
  --shadow-lg:  0 12px 28px rgba(15, 18, 40, 0.12), 0 4px 8px rgba(15, 18, 40, 0.05);
  --shadow-xl:  0 24px 56px rgba(15, 18, 40, 0.16);
  --shadow-focus: 0 0 0 3px rgba(0, 155, 223, 0.32);     /* cyan focus halo  */
  --shadow-signal: 0 8px 24px rgba(0, 155, 223, 0.28);   /* cyan glow on CTA */

  /* ---------- Gradients (the card's cyan→navy pulse field) ---------- */
  --gradient-signal: linear-gradient(135deg, #00b4ff 0%, #009bdf 38%, #384289 100%); /* @kind color */
  --gradient-sky:    linear-gradient(135deg, #57b4dc 0%, #009bdf 100%); /* @kind color */
  --gradient-veil:   linear-gradient(180deg, rgba(15,18,40,0) 0%, rgba(15,18,40,0.55) 100%); /* @kind color */

  /* ---------- Motion ---------- */
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --ease-in-out:cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --dur-fast:   120ms; /* @kind other */
  --dur-base:   200ms; /* @kind other */
  --dur-slow:   320ms; /* @kind other */
}

/* ============================================================
   Injury SOS — Base element styles & utility primitives
   Light reset + brand-default body typography.
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Headings default to the display face */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--text-strong);
  font-weight: var(--fw-semibold);
  line-height: var(--leading-tight);
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }

a { color: var(--text-link); text-decoration: none; }
a:hover { text-decoration: underline; }

code, kbd, samp { font-family: var(--font-mono); font-size: 0.92em; }

:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
  border-radius: var(--radius-xs);
}

/* ---------- Brand helpers ---------- */
.is-eyebrow {
  font-family: var(--eyebrow-font);
  font-weight: var(--fw-semibold);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-link);
}

.is-display {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--text-strong);
}

.is-mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

/* The signal gradient field used on heroes / CTAs */
.bg-signal { background: var(--gradient-signal); color: var(--text-on-brand); }
.bg-navy   { background: var(--surface-brand);   color: var(--text-on-brand); }