/* =========================================================================
   Lerta — Colors & Type
   Tokens + base type for the Lerta brand.
   Load after a webfont import for DM Sans + Nunito.
   ========================================================================= */

@import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,500;0,700;0,800;0,900;1,700&family=Nunito:ital,wght@0,400;0,600;0,700;0,800;0,900;1,400;1,700&family=Poppins:wght@400;500;600;700&display=swap");

:root {
  /* ---------- Brand palette ------------------------------------------ */
  --lerta-green:        #1A6B3C;   /* dominant */
  --lerta-green-deep:   #0F4D29;   /* darker, for hovers on green surfaces */
  --bright-green:       #2E9E5B;   /* accents, primary CTA */
  --bright-green-hi:    #3DB86D;   /* hover lift */
  --bright-green-lo:    #248048;   /* press / active */
  --lerta-yellow:       #F2C12E;   /* emphasis */
  --lerta-yellow-hi:    #FFD34A;
  --lerta-yellow-lo:    #D9A719;
  --off-white:          #F5F5F0;   /* page base */
  --paper:              #FFFFFF;
  --near-black:         #1A1A1A;
  --ink:                #0E1613;   /* slightly greener black for illustration lines */

  /* ---------- Neutrals (derived — warm, NOT cool grey) --------------- */
  --n-95: #F5F5F0;
  --n-88: #E8E7DE;
  --n-78: #D3D1C4;
  --n-60: #A6A497;
  --n-40: #6C6A5E;
  --n-25: #3C3B34;
  --n-10: #1A1A1A;

  /* ---------- Semantic: surfaces ------------------------------------- */
  --bg:               var(--off-white);
  --bg-elevated:      var(--paper);
  --bg-green:         var(--lerta-green);
  --bg-green-bright:  var(--bright-green);
  --bg-yellow:        var(--lerta-yellow);
  --bg-ink:           var(--near-black);

  /* ---------- Semantic: foreground ----------------------------------- */
  --fg1:              var(--near-black);   /* headlines, primary text */
  --fg2:              var(--n-25);         /* secondary text */
  --fg3:              var(--n-40);         /* meta, captions */
  --fg-on-green:      var(--off-white);    /* text on dark-green bg */
  --fg-on-yellow:     var(--near-black);   /* text on yellow */
  --fg-on-bright:     #FFFFFF;             /* text on bright green */
  --fg-link:          var(--bright-green);
  --fg-link-hover:    var(--lerta-green-deep);

  /* ---------- Semantic: border --------------------------------------- */
  --border:           var(--near-black);   /* bold, comic-book line */
  --border-subtle:    var(--n-78);
  --border-green:     var(--lerta-green);

  /* ---------- Status ------------------------------------------------- */
  --success:          var(--bright-green);
  --warning:          var(--lerta-yellow);
  --danger:           #D64545;             /* used sparingly; must coexist with yellow/green */
  --info:             var(--lerta-green);

  /* ---------- Typography: families ----------------------------------- */
  --font-display: "DM Sans", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:    "Nunito", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-learn:   "Poppins", "Nunito", system-ui, sans-serif;   /* dyslexia-friendly worksheets */

  /* ---------- Typography: scale (desktop-first) ---------------------- */
  --fs-00: 12px;   /* micro / legal */
  --fs-0:  14px;   /* meta, captions */
  --fs-1:  16px;   /* body */
  --fs-2:  18px;   /* body-lg */
  --fs-3:  22px;   /* h5 */
  --fs-4:  28px;   /* h4 */
  --fs-5:  36px;   /* h3 */
  --fs-6:  48px;   /* h2 */
  --fs-7:  64px;   /* h1 */
  --fs-8:  88px;   /* display */
  --fs-9:  120px;  /* hero display */

  --lh-tight:  1.05;
  --lh-snug:   1.18;
  --lh-normal: 1.45;
  --lh-loose:  1.6;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.08em;   /* for small all-caps eyebrows */

  /* ---------- Spacing (4-based, generous) ---------------------------- */
  --sp-0: 0;
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;
  --sp-10: 128px;

  /* ---------- Radii (soft, not bubbly) ------------------------------- */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;    /* default card */
  --radius-lg: 20px;    /* hero card, big cta */
  --radius-pill: 999px; /* tags, badges */

  /* ---------- Borders ------------------------------------------------ */
  --border-w-1: 1.5px;
  --border-w-2: 2.5px;   /* default card outline — comic-book weight */
  --border-w-3: 4px;     /* heavy — hero elements, badges */

  /* ---------- Shadows: "offset" style (flat, comic-book, not blurry) */
  --shadow-sm: 3px 3px 0 0 var(--ink);
  --shadow-md: 6px 6px 0 0 var(--ink);
  --shadow-lg: 10px 10px 0 0 var(--ink);
  --shadow-press: 2px 2px 0 0 var(--ink);

  /* ---------- Motion ------------------------------------------------- */
  --ease-standard: cubic-bezier(.2,.7,.2,1);
  --ease-spring:   cubic-bezier(.34,1.56,.64,1);     /* tiny overshoot */
  --ease-in:       cubic-bezier(.4,0,1,1);
  --ease-out:      cubic-bezier(0,0,.2,1);
  --dur-1: 120ms;  /* instant feedback */
  --dur-2: 200ms;  /* hover / state */
  --dur-3: 320ms;  /* transitions */
  --dur-4: 520ms;  /* emphasis / entry */

  /* ---------- Layout ------------------------------------------------- */
  --container: 1200px;
  --container-tight: 960px;
  --gutter: 24px;
}

/* =========================================================================
   BASE — opinionated, on-brand defaults
   ========================================================================= */

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg1);
  font-family: var(--font-body);
  font-size: var(--fs-1);
  line-height: var(--lh-normal);
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, .display {
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--fg1);
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-tight);
  margin: 0 0 var(--sp-4);
  text-wrap: balance;
}

h1, .h1 { font-size: var(--fs-7); font-weight: 900; }
h2, .h2 { font-size: var(--fs-6); font-weight: 800; }
h3, .h3 { font-size: var(--fs-5); font-weight: 800; }
h4, .h4 { font-size: var(--fs-4); font-weight: 700; }
h5, .h5 { font-size: var(--fs-3); font-weight: 700; }

.display-xl { font-family: var(--font-display); font-weight: 900; font-size: var(--fs-9); line-height: .92; letter-spacing: -0.035em; }
.display-lg { font-family: var(--font-display); font-weight: 900; font-size: var(--fs-8); line-height: .96; letter-spacing: -0.03em; }

p { margin: 0 0 var(--sp-4); text-wrap: pretty; }
.lead { font-size: var(--fs-2); line-height: var(--lh-loose); color: var(--fg2); }
.meta { font-size: var(--fs-0); color: var(--fg3); }

/* Eyebrow — small all-caps label over a headline */
.eyebrow {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-0);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--bright-green);
}

a { color: var(--fg-link); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: var(--fg-link-hover); }

code, kbd, .mono { font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: .95em; }

/* Inline highlight — the yellow marker motif */
.hl-yellow {
  background: linear-gradient(180deg, transparent 55%, var(--lerta-yellow) 55%);
  padding: 0 .08em;
}

::selection { background: var(--lerta-yellow); color: var(--near-black); }

/* Focus ring — green, offset, visible on all surfaces */
:focus-visible {
  outline: 3px solid var(--bright-green);
  outline-offset: 2px;
  border-radius: 2px;
}