/* ============================================================
   e-linguist — Colors & Type
   ============================================================
   Warm, grown-up, structured. Off-white surfaces, dark-gray text,
   honey-yellow accent from the logo. Generous whitespace, rounded
   corners. No textbook clichés, no startup minimalism.
   ============================================================ */

/* ---------- Web fonts ---------- */
/* Display: Fraunces alternative — we use "Bricolage Grotesque" for a warm,
   grown-up display feel that pairs with sans body text. (Substitute —
   please replace with a licensed display face if available.) */
@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,600;12..96,700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap");

:root {
  /* ============================================================
     COLOR — Brand
     ============================================================ */
  /* Honey yellow — primary accent. Lifted from the logo path fill. */
  --honey-50:  #FFF8E5;
  --honey-100: #FDEFC2;
  --honey-200: #FCE294;
  --honey-300: #FCD466;
  --honey-400: #FCC433;   /* brand */
  --honey-500: #E8AE1F;
  --honey-600: #C4910F;
  --honey-700: #8E6906;

  /* Companion warm beige — pulled from the Brandenburg Gate columns,
     used for secondary surfaces and section bands. */
  --sand-50:   #FBF5EC;
  --sand-100:  #F5EAD6;
  --sand-200:  #ECD9B7;
  --sand-300:  #DDC089;
  --sand-400:  #C9A35F;
  --sand-500:  #A88542;
  --sand-600:  #7A5F2C;

  /* Teal — tertiary, cool contrast. Info banners, links, secondary CTAs. */
  --teal-50:   #E6F3F1;
  --teal-100:  #CFE9E5;
  --teal-200:  #BFE0DC;
  --teal-300:  #94CCC4;
  --teal-400:  #6FB7AF;
  --teal-600:  #3F8C84;
  --teal-700:  #28645E;

  /* Crayon palette — only for illustration / pedagogical accent
     (success-feedback, progress confetti, lesson tags). */
  --crayon-red:    #E94B3C;
  --crayon-red-100:    #FBE4E1;
  --crayon-blue:   #3FA6E0;
  --crayon-blue-100:   #DCEDF8;
  --crayon-green:  #6FB54F;
  --crayon-green-100:  #E2F0DA;
  --crayon-yellow: #F5C946;
  --crayon-yellow-100: #FDF1CC;

  /* ============================================================
     COLOR — Neutrals
     ============================================================
     Off-white surfaces, warm dark-gray ink. Never pure black. */
  --paper:    #FBFAF7;   /* default page background */
  --paper-2:  #F5F2EC;   /* recessed / banded sections */
  --card:     #FFFFFF;   /* card surface, sits on paper */
  --card-2:   #FAF7F1;   /* secondary card / exercise box */

  --line:     #ECE7DD;   /* hairline borders on warm surfaces */
  --line-2:   #DCD5C6;   /* slightly stronger divider */

  --ink:      #1F1B16;   /* primary text — warm dark gray */
  --ink-2:    #3A332A;   /* headings on color */
  --ink-3:    #5C5346;   /* body secondary */
  --ink-4:    #8A8273;   /* muted, captions */
  --ink-5:    #B8B0A0;   /* placeholder, disabled */

  /* ============================================================
     COLOR — Semantic
     ============================================================ */
  --bg:           var(--paper);
  --bg-recessed:  var(--paper-2);
  --surface:      var(--card);
  --surface-alt:  var(--card-2);

  --fg:           var(--ink);
  --fg-muted:     var(--ink-3);
  --fg-subtle:    var(--ink-4);
  --fg-on-honey:  var(--ink);     /* text on yellow stays dark */

  --border:       var(--line);
  --border-strong: var(--line-2);

  --accent:       var(--honey-400);
  --accent-hover: var(--honey-500);
  --accent-press: var(--honey-600);
  --accent-soft:  var(--honey-100);

  --link:         var(--ink);
  --link-hover:   var(--honey-600);

  --success:      #4F8F3A;
  --success-bg:   #E7F1DD;
  --warning:      #C97A0F;
  --warning-bg:   #FCEBC8;
  --danger:       #C0392B;
  --danger-bg:    #FAE3DF;
  --info:         var(--teal-600);
  --info-bg:      #DDEEEC;

  --focus-ring:   #FFD460;       /* yellow ring, 3px outline */

  /* ============================================================
     RADIUS
     ============================================================
     Always rounded. Buttons + chips fully pill. Cards medium-large. */
  --r-xs:   6px;
  --r-sm:   10px;
  --r-md:   14px;     /* small cards, inputs */
  --r-lg:   20px;     /* default card */
  --r-xl:   28px;     /* hero / exercise box */
  --r-2xl:  36px;
  --r-pill: 999px;

  /* ============================================================
     SPACING
     ============================================================ */
  --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;

  /* ============================================================
     SHADOWS — soft, warm, never blue. Cards float gently on paper.
     ============================================================ */
  --shadow-xs: 0 1px 2px rgba(60, 45, 20, 0.04);
  --shadow-sm: 0 2px 6px rgba(60, 45, 20, 0.06);
  --shadow-md: 0 6px 18px rgba(60, 45, 20, 0.08);
  --shadow-lg: 0 16px 40px rgba(60, 45, 20, 0.10);
  --shadow-honey: 0 8px 24px rgba(252, 196, 51, 0.30);   /* glow under primary CTAs on hover */

  /* ============================================================
     MOTION
     ============================================================ */
  --ease:        cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-bounce: cubic-bezier(0.34, 1.4, 0.64, 1);
  --dur-fast:    140ms;
  --dur:         220ms;
  --dur-slow:    420ms;

  /* ============================================================
     TYPOGRAPHY — base
     ============================================================ */
  --font-display: "Bricolage Grotesque", "Fraunces", ui-serif, Georgia, serif;
  --font-sans:    "Inter", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono:    "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;

  /* Type scale — modular, bold display, calm body */
  --fs-display: clamp(40px, 6vw, 72px);
  --fs-h1:      clamp(32px, 4.4vw, 52px);
  --fs-h2:      clamp(26px, 3vw, 36px);
  --fs-h3:      22px;
  --fs-h4:      18px;
  --fs-body:    16px;
  --fs-body-lg: 18px;
  --fs-small:   14px;
  --fs-xs:      12.5px;

  --lh-tight:   1.05;
  --lh-snug:    1.2;
  --lh-normal:  1.5;
  --lh-relaxed: 1.65;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.02em;
  --tracking-caps:   0.14em;
}

/* ============================================================
   SEMANTIC TYPE — apply to elements
   ============================================================ */
html {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--font-sans);
  color: var(--fg);
  background: var(--bg);
}

/* Display — used for hero, big quotes, section openers */
.t-display {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
  text-wrap: balance;
}

h1, .t-h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h1);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
  text-wrap: balance;
}

h2, .t-h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
  text-wrap: balance;
}

h3, .t-h3 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  color: var(--fg);
}

h4, .t-h4 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
  color: var(--fg);
}

p, .t-body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  color: var(--fg);
  text-wrap: pretty;
}

.t-body-lg {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-relaxed);
  color: var(--fg);
}

.t-small,
small {
  font-size: var(--fs-small);
  line-height: var(--lh-normal);
  color: var(--fg-muted);
}

.t-caption {
  font-size: var(--fs-xs);
  line-height: 1.4;
  color: var(--fg-subtle);
  letter-spacing: var(--tracking-wide);
}

/* All-caps eyebrow / section label — used heavily in the deck */
.t-eyebrow {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 12px;
  line-height: 1;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--fg-muted);
}

.t-mono,
code, pre {
  font-family: var(--font-mono);
  font-size: 13.5px;
  letter-spacing: 0;
}

a {
  color: var(--link);
  text-decoration: underline;
  text-decoration-color: var(--honey-300);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  transition: color var(--dur) var(--ease), text-decoration-color var(--dur) var(--ease);
}
a:hover {
  color: var(--link-hover);
  text-decoration-color: var(--honey-500);
}

::selection {
  background: var(--honey-200);
  color: var(--ink);
}

:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}