/* =============================================================
   Helm — Colors & Type
   The relationship layer for life insurance.
   ============================================================= */

/* ---- Fonts ----
   Headlines / display: Auge Trial SemiBold (only SemiBold provided).
                        Ancizar Serif as a back-up serif for weights Auge can't reach.
   Body / UI:           Geist (variable).
*/
@font-face {
  font-family: "Auge";
  src: url("./fonts/Auge-Trial-SemiBold.otf") format("opentype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Ancizar Serif";
  src: url("./fonts/AncizarSerif-VariableFont_wght.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist";
  src: url("./fonts/Geist-VariableFont_wght.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ============================================================
     COLOR SYSTEM
     Pulled from the Visual Brand Narrative + the Figma deliverables.
     The product runs on a warm, parchment-y core (Helm White / Ecru
     on Dark Green) and reaches for vibrant accents — Lemon, Chartreuse,
     Purple, Orange, Blue — for flows, allocations and brand moments.
     ============================================================ */

  /* — Core neutrals — */
  --helm-dark-green: #001D00;     /* primary text, lines, ink           */
  --helm-dark-green-2: #123312;   /* secondary deep green (subtle)      */
  --helm-black:       #000000;
  --helm-white:       #FEFCF5;    /* "Helm White" — warm off-white      */
  --helm-ecru:        #F9F3DC;    /* "Helm Ecru" — pale parchment       */
  --helm-dark-ecru:   #E5E2D3;    /* card lines + soft surfaces         */
  --helm-grey:        #C7C5BD;    /* CFCDC5 in Figma                    */
  --helm-dark-grey:   #798279;    /* muted text                         */

  /* — Brand accents (the "vibrant" five) — */
  --helm-lemon:        #F7F775;   /* signature lemon yellow             */
  --helm-chartreuse:   #C5C34F;   /* deep chartreuse — primary CTA      */
  --helm-chartreuse-2: #8D9933;   /* primary CTA (darker variant)       */
  --helm-purple:       #C6B3EB;   /* light purple                       */
  --helm-dark-purple:  #9888BF;   /* deep purple                        */
  --helm-orange:       #FFB876;   /* light orange                       */
  --helm-dark-orange:  #D38D54;   /* deep orange                        */
  --helm-blue:         #A1DCE2;   /* light blue                         */
  --helm-dark-blue:    #70B6BA;   /* deep blue                          */
  --helm-soft-chartreuse: #C0C983; /* secondary answer in a multi-choice  */

  /* — Semantic foregrounds — */
  --fg-1: var(--helm-dark-green);            /* primary text             */
  --fg-2: #2A3F2A;                            /* slightly lighter ink     */
  --fg-3: var(--helm-dark-grey);             /* meta / hint              */
  --fg-disabled: #CFCDC5;                    /* grey-out                 */
  --fg-on-dark: var(--helm-white);           /* text on dark green       */
  --fg-on-accent: var(--helm-white);         /* text on chartreuse/CTAs  */
  --fg-link: var(--helm-chartreuse-2);

  /* — Semantic backgrounds — */
  --bg-canvas:   var(--helm-white);          /* main canvas              */
  --bg-surface:  var(--helm-ecru);           /* cards / surfaces         */
  --bg-sunken:   #F4EFD8;                    /* sunken / pressed         */
  --bg-inverse:  var(--helm-dark-green);     /* dark mode + heroes       */
  --bg-accent-lemon:      var(--helm-lemon);
  --bg-accent-chartreuse: var(--helm-chartreuse-2);
  --bg-accent-purple:     var(--helm-purple);
  --bg-accent-orange:     var(--helm-orange);
  --bg-accent-blue:       var(--helm-blue);

  /* — Lines & dividers — */
  --line-1: var(--helm-dark-ecru);           /* hairline rule            */
  --line-2: var(--helm-dark-green);          /* heavy ink rule           */

  /* — Shadows & elevation —
     Helm uses a hard 4px offset ink shadow on cards (no blur) plus
     occasional softer drop. Looks like printed paper. */
  --shadow-card:       4px 4px 0 0 var(--helm-dark-green);
  --shadow-card-lg:    4px 8px 0 0 var(--helm-dark-green);
  --shadow-soft:       0 8px 24px -8px rgba(0,29,0,0.18);

  /* — Radius tokens (softer than glassy SaaS, but rounded) — */
  --r-1:  4px;
  --r-2:  8px;
  --r-3:  12px;
  --r-4:  16px;
  --r-5:  24px;
  --r-pill: 999px;

  /* — Spacing scale (4-grid) — */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;

  /* ============================================================
     TYPE SYSTEM
     Display + Headline = Auge SemiBold (serif). Ancizar fills weights.
     UI + body          = Geist (sans). All values lifted from Figma.
     ============================================================ */

  --font-serif:   "Auge", "Ancizar Serif", "PT Serif", Georgia, serif;
  --font-sans:    "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;

  /* Display ramp (serif) */
  --t-display-xl-size: 120px;  --t-display-xl-line: 120px;  --t-display-xl-weight: 600;
  --t-display-l-size:  90px;   --t-display-l-line:  96px;   --t-display-l-weight:  600;
  --t-display-m-size:  60px;   --t-display-m-line:  68px;   --t-display-m-weight:  600;
  --t-display-s-size:  40px;   --t-display-s-line:  48px;   --t-display-s-weight:  600;

  /* Heading ramp (serif → switches to sans below H4) */
  --t-h1-size: 58px;  --t-h1-line: 58px;  --t-h1-weight: 600;
  --t-h2-size: 39px;  --t-h2-line: 48px;  --t-h2-weight: 600;
  --t-h3-size: 32px;  --t-h3-line: 40px;  --t-h3-weight: 600;
  --t-h4-size: 24px;  --t-h4-line: 32px;  --t-h4-weight: 600;

  /* Editorial body (Auge italic-y serif at 20/30 — used for AI prose) */
  --t-prose-size: 20px; --t-prose-line: 30px; --t-prose-weight: 400;

  /* UI / body ramp (Geist) */
  --t-body-l-size: 18px; --t-body-l-line: 28px; --t-body-l-weight: 400;
  --t-body-size:   16px; --t-body-line:   24px; --t-body-weight:   400;
  --t-body-s-size: 15px; --t-body-s-line: 20px; --t-body-s-weight: 400;
  --t-meta-size:   14px; --t-meta-line:   20px; --t-meta-weight:   400;
  --t-caption-size: 13px; --t-caption-line: 16px; --t-caption-weight: 500;

  /* CTAs */
  --t-cta-size:   18px; --t-cta-line: 18px; --t-cta-weight: 700;
  --t-chip-size:  16px; --t-chip-line: 16px; --t-chip-weight: 500;

  /* Letter-spacing — keep tight for Auge, neutral for Geist */
  --tracking-display: -0.01em;
  --tracking-tight:   -0.005em;
  --tracking-normal:   0em;
}

/* ---- Element-level defaults so cards & docs inherit cleanly ---- */
html, body {
  font-family: var(--font-sans);
  color: var(--fg-1);
  background: var(--bg-canvas);
  font-size: var(--t-body-size);
  line-height: var(--t-body-line);
}

h1, .h1, h2, .h2, h3, .h3 {
  font-family: var(--font-serif);
  letter-spacing: var(--tracking-display);
  color: var(--fg-1);
  margin: 0;
}
h1, .h1 { font-size: var(--t-h1-size); line-height: var(--t-h1-line); font-weight: var(--t-h1-weight); }
h2, .h2 { font-size: var(--t-h2-size); line-height: var(--t-h2-line); font-weight: var(--t-h2-weight); }
h3, .h3 { font-size: var(--t-h3-size); line-height: var(--t-h3-line); font-weight: var(--t-h3-weight); }
h4, .h4 {
  font-family: var(--font-sans);
  font-size: var(--t-h4-size); line-height: var(--t-h4-line); font-weight: 600;
  margin: 0;
}

.display-xl { font-family: var(--font-serif); font-weight: 600; font-size: var(--t-display-xl-size); line-height: var(--t-display-xl-line); letter-spacing: var(--tracking-display); }
.display-l  { font-family: var(--font-serif); font-weight: 600; font-size: var(--t-display-l-size);  line-height: var(--t-display-l-line);  letter-spacing: var(--tracking-display); }
.display-m  { font-family: var(--font-serif); font-weight: 600; font-size: var(--t-display-m-size);  line-height: var(--t-display-m-line);  letter-spacing: var(--tracking-display); }
.display-s  { font-family: var(--font-serif); font-weight: 600; font-size: var(--t-display-s-size);  line-height: var(--t-display-s-line); }

.prose { font-family: var(--font-serif); font-weight: 400; font-size: var(--t-prose-size); line-height: var(--t-prose-line); }
.body-l { font-size: var(--t-body-l-size); line-height: var(--t-body-l-line); }
.body   { font-size: var(--t-body-size);   line-height: var(--t-body-line); }
.body-s { font-size: var(--t-body-s-size); line-height: var(--t-body-s-line); }
.meta   { font-size: var(--t-meta-size);   line-height: var(--t-meta-line); color: var(--fg-3); }
.caption{ font-size: var(--t-caption-size);line-height: var(--t-caption-line); font-weight: 500; }

/* CTA / button text */
.t-cta  { font-size: var(--t-cta-size); line-height: var(--t-cta-line); font-weight: 700; }
.t-chip { font-size: var(--t-chip-size); line-height: var(--t-chip-line); font-weight: 500; }