/* Intercepted Health — Design System (bundled tokens for deploy) */

/* ===== fonts.css ===== */
/* ============================================================
   FONTS — Intercepted Health
   ------------------------------------------------------------
   Brand faces (commercial / trial — not bundled):
     Display : Martina Plantijn  (contemporary Plantin-style serif)
     Body    : American Grotesk  (neutral grotesque)

   SUBSTITUTES IN USE (Google Fonts, license-free):
     Display : Newsreader      — editorial serif, strong signature italic
     Body    : Hanken Grotesk  — clean neutral grotesque, light weights

   Swap these @font-face/@import lines for the licensed brand fonts
   when files are available; the tokens in typography.css reference
   the family names below.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,400;1,6..72,500&display=swap');


/* ===== colors.css ===== */
/* ============================================================
   COLORS — Intercepted Health
   Forest + Offwhite is the primary pairing. Everything supports it.
   No gradients. No brand-color shadows. Flat.
   ============================================================ */
:root {
  /* --- Brand palette (base) --- */
  --forest:    #005145;  /* Primary brand. Dark bg, primary buttons, display on light */
  --sage:      #c9debb;  /* Secondary. ONLY on Forest backgrounds — never on white/offwhite */
  --offwhite:  #f6f5f1;  /* Page background. Warm, not clinical white */
  --mist:      #e8ede5;  /* Borders, dividers, card fills, quiet section bg */
  --ink:       #0f1410;  /* Primary text. Near-black, green undertone */
  --warm-grey: #7a8a7d;  /* Secondary text, labels, captions, metadata */
  --alert:     #b84a2e;  /* Risk signal ONLY. Never decorative */
  --whatsapp:  #25d366;  /* WhatsApp-link buttons ONLY. Nowhere else */
  --white:     #ffffff;

  /* --- Score band + supporting --- */
  --amber:     #f5a623;  /* Score band 40–69 */
  --alert-bg:  #fdf0ec;  /* Alert tag fill */

  /* --- On-Forest text levels --- */
  --on-dark-primary:   #f6f5f1;                  /* Offwhite */
  --on-dark-accent:    #c9debb;                  /* Sage */
  --on-dark-secondary: rgba(201, 222, 187, 0.65);/* muted sage */
  --on-dark-meta:      rgba(201, 222, 187, 0.60);
  --on-dark-hairline:  rgba(201, 222, 187, 0.15);
  --on-dark-track:     rgba(255, 255, 255, 0.15);

  /* --- Semantic aliases --- */
  --surface-page:   var(--offwhite);
  --surface-alt:    var(--white);
  --surface-quiet:  var(--mist);
  --surface-card:   var(--white);
  --surface-dark:   var(--forest);

  --text-primary:   var(--ink);
  --text-secondary: var(--warm-grey);
  --text-on-dark:   var(--on-dark-primary);
  --text-accent:    var(--on-dark-accent);

  --border:         var(--mist);
  --border-strong:  var(--forest);

  --action:         var(--forest);
  --action-text:    var(--offwhite);
  --action-accent:  var(--sage);
  --signal:         var(--alert);
}


/* ===== typography.css ===== */
/* ============================================================
   TYPOGRAPHY — Intercepted Health
   Display = Martina Plantijn (sub: Newsreader). Italic is the signature.
   Body    = American Grotesk (sub: Hanken Grotesk).
   Hero/display are ALWAYS serif. Italic = quotes, score, data — not headlines.
   ============================================================ */
:root {
  /* --- Families --- */
  --font-display: 'Newsreader', 'Martina Plantijn', Georgia, 'Times New Roman', serif;
  --font-body:    'Hanken Grotesk', 'American Grotesk', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;

  /* --- Role sizes (desktop) --- */
  --size-hero:        88px;  /* serif 400, lh 1.0, ls -1px */
  --size-display:     64px;  /* serif 400, lh 1.05, ls -0.5px */
  --size-display-it:  48px;  /* serif 400 italic, lh 1.1 — pull quotes, data */
  --size-heading:     28px;  /* body 500, lh 1.25 */
  --size-subheading:  22px;  /* body 300, lh 1.5, warm-grey */
  --size-body:        16px;  /* body 400, lh 1.7 */
  --size-label:       11px;  /* body 500, uppercase, ls 0.18em, warm-grey */
  --size-caption:     11px;  /* body 400, lh 1.6, warm-grey */
  --size-score:       80px;  /* serif 400, on Forest, offwhite, NO italic */
  --size-stat:        48px;  /* serif 400 italic, forest */

  /* --- Mobile hero/display --- */
  --size-hero-m:      48px;
  --size-display-m:   40px;

  /* --- Weights --- */
  --w-light:   300; /* @kind font */
  --w-regular: 400; /* @kind font */
  --w-medium:  500; /* @kind font */
  --w-semi:    600; /* @kind font */

  /* --- Line heights --- */
  --lh-tight:   1.0;  /* @kind font */
  --lh-display: 1.05; /* @kind font */
  --lh-snug:    1.25; /* @kind font */
  --lh-normal:  1.5;  /* @kind font */
  --lh-body:    1.7;  /* @kind font */

  /* --- Tracking --- */
  --ls-hero:    -1px;
  --ls-display: -0.5px;
  --ls-label:   0.18em;
  --ls-caption: 0.04em;

  /* --- Body measure --- */
  --measure: 640px;
}

/* ---- Convenience type classes (optional helpers) ---- */
.t-hero      { font-family: var(--font-display); font-weight: 400; font-size: var(--size-hero);    line-height: var(--lh-tight);   letter-spacing: var(--ls-hero); }
.t-display   { font-family: var(--font-display); font-weight: 400; font-size: var(--size-display); line-height: var(--lh-display); letter-spacing: var(--ls-display); }
.t-display-it{ font-family: var(--font-display); font-weight: 400; font-style: italic; font-size: var(--size-display-it); line-height: var(--lh-display); }
.t-heading   { font-family: var(--font-body); font-weight: 500; font-size: var(--size-heading); line-height: var(--lh-snug); }
.t-subheading{ font-family: var(--font-body); font-weight: 300; font-size: var(--size-subheading); line-height: var(--lh-normal); color: var(--warm-grey); }
.t-body      { font-family: var(--font-body); font-weight: 400; font-size: var(--size-body); line-height: var(--lh-body); }
.t-label     { font-family: var(--font-body); font-weight: 500; font-size: var(--size-label); line-height: 1; text-transform: uppercase; letter-spacing: var(--ls-label); color: var(--warm-grey); }
.t-caption   { font-family: var(--font-body); font-weight: 400; font-size: var(--size-caption); line-height: var(--lh-caption, 1.6); color: var(--warm-grey); }


/* ===== spacing.css ===== */
/* ============================================================
   SPACING — Intercepted Health
   Base unit 4px. All spacing is a multiple of 4.
   ============================================================ */
:root {
  --space-1:  4px;    /* micro gaps, icon padding */
  --space-2:  8px;    /* tight element gaps */
  --space-3:  12px;   /* tag padding, input internal */
  --space-4:  16px;   /* default gap between elements */
  --space-5:  24px;   /* small card padding, component gaps */
  --space-6:  32px;   /* large card padding, grid gutters */
  --space-7:  48px;   /* component-to-component */
  --space-8:  64px;   /* mobile section padding */
  --space-9:  96px;   /* desktop section padding */
  --space-10: 128px;  /* major section separators */

  /* --- Section rhythm --- */
  --section-y:        96px;  /* desktop top/bottom */
  --section-y-mobile: 64px;

  /* --- Radii --- */
  --radius-input:  6px;
  --radius-card:   8px;
  --radius-pill:   100px;

  /* --- Borders --- */
  --hairline:      1px;
  --border-w:      1.5px;  /* inputs, secondary buttons */
  --accent-bar:    2px;    /* stat block left border */
}


/* ===== layout.css ===== */
/* ============================================================
   LAYOUT — Intercepted Health
   12-column · max content 1100px · gutters 32px · margin 40/20px
   ============================================================ */
:root {
  --grid-columns:    12;       /* @kind other */
  --content-max:     1100px;
  --measure:         640px;   /* body running text max-width */
  --gutter:          32px;
  --page-margin:     40px;    /* desktop */
  --page-margin-m:   20px;    /* mobile */
  --nav-height:      64px;
  --breakpoint:      768px;   /* grids collapse to single column below */
  --score-card-max:  340px;
}

/* container helper */
.ih-container {
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--page-margin);
  box-sizing: border-box;
}
@media (max-width: 768px) {
  .ih-container { padding-inline: var(--page-margin-m); }
}