/* ============================================================
   My High School Timeline — Foundations
   Colors + Typography tokens
   ============================================================ */

@font-face {
  font-family: "Nata Sans";
  src: url("./fonts/NataSans-VariableFont_wght.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Google Sans";
  src: url("./fonts/GoogleSans-VariableFont.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------- Brand color ---------- */
  --brand-lime:        #56A700;   /* logo green, "salatovy" */
  --brand-lime-600:    #4A9100;
  --brand-lime-700:    #3C7700;
  --brand-lime-200:    #C7E89E;   /* tint for chips, soft fills */
  --brand-lime-100:    #E4F4CC;   /* very soft fill */
  --brand-lime-50:     #F2FAE3;   /* faintest wash */

  /* ---------- Neutrals ---------- */
  --black:             #0B0B0B;   /* pure-ish black for type and dark blocks */
  --ink-900:           #141414;
  --ink-700:           #2B2B2B;
  --ink-500:           #5A5A5A;
  --ink-400:           #8A8A8A;
  --ink-300:           #BFBFBF;
  --ink-200:           #E2E2E2;
  --ink-100:           #F1F1F1;
  --ink-50:            #F8F8F7;
  --white:             #FFFFFF;

  /* ---------- Semantic surface tokens (light theme default) ---------- */
  --bg:                var(--white);
  --bg-soft:           var(--ink-50);
  --bg-muted:          var(--ink-100);
  --surface:           var(--white);
  --surface-raised:    var(--white);
  --surface-inverse:   var(--black);

  --fg:                var(--ink-900);
  --fg-muted:          var(--ink-500);
  --fg-subtle:         var(--ink-400);
  --fg-inverse:        var(--white);
  --fg-on-brand:       var(--black);          /* black on lime reads strongest */

  --accent:            var(--brand-lime);
  --accent-hover:      var(--brand-lime-600);
  --accent-pressed:    var(--brand-lime-700);
  --accent-soft:       var(--brand-lime-100);

  --border:            var(--ink-200);
  --border-strong:     var(--ink-900);
  --border-accent:     var(--brand-lime);

  /* ---------- Status (use sparingly — brand is the hero) ---------- */
  --success:           var(--brand-lime-600);
  --warning:           #E89B00;
  --danger:            #D5341A;
  --info:              #2B6BD8;

  /* ---------- Radii (mild but generous; "myagky, skruglyonny") ---------- */
  --radius-xs:         6px;
  --radius-sm:         10px;
  --radius-md:         14px;     /* default for inputs, chips */
  --radius-lg:         20px;     /* cards */
  --radius-xl:         28px;     /* hero blocks, big CTAs */
  --radius-pill:       999px;
  --radius-full:       9999px;

  /* ---------- Spacing (8pt-ish) ---------- */
  --sp-1:              4px;
  --sp-2:              8px;
  --sp-3:              12px;
  --sp-4:              16px;
  --sp-5:              20px;
  --sp-6:              24px;
  --sp-8:              32px;
  --sp-10:             40px;
  --sp-12:             48px;
  --sp-16:             64px;
  --sp-20:             80px;
  --sp-24:             96px;

  /* ---------- Shadows (soft, low-contrast) ---------- */
  --shadow-xs:         0 1px 2px rgba(11, 11, 11, 0.04);
  --shadow-sm:         0 2px 6px rgba(11, 11, 11, 0.06);
  --shadow-md:         0 8px 24px rgba(11, 11, 11, 0.08);
  --shadow-lg:         0 20px 48px rgba(11, 11, 11, 0.12);
  --shadow-lime:       0 12px 28px rgba(86, 167, 0, 0.28);   /* glowy CTA */

  /* ---------- Type families ---------- */
  --font-display:      "Nata Sans", "Inter", system-ui, -apple-system, sans-serif;
  --font-body:         "Google Sans", "Inter", system-ui, -apple-system, sans-serif;
  --font-mono:         ui-monospace, "JetBrains Mono", "SF Mono", Menlo, monospace;

  /* ---------- Type scale (mobile-first; scales up for deck) ---------- */
  --fs-12:             12px;
  --fs-14:             14px;
  --fs-16:             16px;
  --fs-18:             18px;
  --fs-20:             20px;
  --fs-24:             24px;
  --fs-28:             28px;
  --fs-32:             32px;
  --fs-40:             40px;
  --fs-48:             48px;
  --fs-64:             64px;
  --fs-80:             80px;
  --fs-96:             96px;

  /* ---------- Line heights ---------- */
  --lh-tight:          1.02;     /* display headlines */
  --lh-snug:           1.15;     /* h1/h2 */
  --lh-normal:         1.45;     /* body */
  --lh-loose:          1.6;      /* long-form */

  /* ---------- Letter spacing ---------- */
  --ls-tighter:       -0.03em;   /* big display */
  --ls-tight:         -0.015em;
  --ls-normal:         0em;
  --ls-wide:           0.04em;   /* eyebrows, small caps */

  /* ---------- Motion ---------- */
  --ease-out:          cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out:       cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:          120ms;
  --dur-base:          200ms;
  --dur-slow:          360ms;

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

/* ============================================================
   Dark blocks — apply to a section to flip foreground colors
   "blocks may be filled in black with white type and lime accents"
   ============================================================ */
.theme-dark,
[data-theme="dark"] {
  --bg:                var(--black);
  --bg-soft:           var(--ink-900);
  --bg-muted:          var(--ink-700);
  --surface:           var(--ink-900);
  --surface-raised:    var(--ink-700);
  --surface-inverse:   var(--white);

  --fg:                var(--white);
  --fg-muted:          #C8C8C8;
  --fg-subtle:         var(--ink-400);
  --fg-inverse:        var(--black);

  --border:            #2B2B2B;
  --border-strong:     var(--white);

  --shadow-xs:         0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-sm:         0 2px 6px rgba(0, 0, 0, 0.5);
  --shadow-md:         0 8px 24px rgba(0, 0, 0, 0.55);
  --shadow-lg:         0 24px 56px rgba(0, 0, 0, 0.6);
}

/* ============================================================
   Semantic element styles (drop-in)
   ============================================================ */

html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--fs-16);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, .display {
  font-family: var(--font-display);
  font-weight: 900;       /* Nata Sans MAX weight, per brief */
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-snug);
  color: var(--fg);
  text-wrap: balance;
  margin: 0;
}

.display-xl, h1.display, .h-display {
  font-size: clamp(48px, 7vw, 96px);
  letter-spacing: var(--ls-tighter);
  line-height: var(--lh-tight);
  text-transform: uppercase;
}

h1 { font-size: clamp(32px, 4.5vw, 56px); text-transform: uppercase; }
h2 { font-size: clamp(28px, 3.4vw, 40px); }
h3 { font-size: var(--fs-24); }
h4 { font-size: var(--fs-20); font-weight: 700; }

.eyebrow {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-12);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--fg-muted);
}

p, li {
  font-family: var(--font-body);
  font-size: var(--fs-16);
  line-height: var(--lh-normal);
  color: var(--fg);
}

.lede {
  font-size: var(--fs-20);
  line-height: var(--lh-normal);
  color: var(--fg-muted);
  font-weight: 400;
}

small, .small {
  font-size: var(--fs-14);
  color: var(--fg-muted);
}

a {
  color: var(--fg);
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  transition: color var(--dur-base) var(--ease-out);
}
a:hover { color: var(--accent-hover); }

code, kbd, samp {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--bg-muted);
  padding: 0.1em 0.4em;
  border-radius: var(--radius-xs);
}

::selection {
  background: var(--brand-lime);
  color: var(--black);
}