/* =========================================================================
   Gestus Design System — colors_and_type.css
   "Gestus Clean Organic" — Deep Olive + Pastel Yellow on White / Charcoal
   ========================================================================= */

/* ---------- Font: Lexend ------------------------------------------------- */
@import url("https://fonts.googleapis.com/css2?family=Lexend:wght@300;400;500;600;700;800&display=swap");

/* ---------- Tokens ------------------------------------------------------- */
:root {
  /* -- Palette: Brand ---------------------------------------------------- */
  --olive-50:  #F5F5E8;
  --olive-100: #EAEACC;
  --olive-200: #D0D0A0;
  --olive-300: #8A8A2A;
  --olive-400: #4A4A1E;
  --olive-500: #35350F;
  --olive-600: #23230F; /* Deep Olive — brand surface & text */
  --olive-700: #1A1A0B;

  --yellow-100: #FFFFD6;
  --yellow-200: #FEFEC0;
  --yellow-400: #FDFD96; /* Pastel Yellow — accent, icons, primary CTA */
  --yellow-500: #F0F020;
  --yellow-grad-end: #F5F060; /* end of CTA gradient */

  /* -- Palette: Neutrals (Zinc) ----------------------------------------- */
  --zinc-50:  #FAFAFA;
  --zinc-100: #F4F4F5;
  --zinc-200: #E4E4E7;
  --zinc-300: #D4D4D8;
  --zinc-400: #A1A1AA;
  --zinc-500: #71717A;
  --zinc-600: #52525B;
  --zinc-700: #3F3F46;
  --zinc-800: #27272A;
  --zinc-900: #18181B;
  --zinc-950: #09090B;

  /* -- Palette: Semantic ------------------------------------------------ */
  --amber-400: #FBBF24;
  --amber-500: #F59E0B; /* streak flame */
  --green-100: #DCFCE7;
  --green-500: #22C55E; /* mastered / correct */
  --green-700: #15803D;
  --red-100:   #FEE2E2;
  --red-500:   #EF4444; /* error / incorrect */
  --red-700:   #B91C1C;
  --white:     #FFFFFF;

  /* -- Semantic — Light theme (default) --------------------------------- */
  --bg:           #FFFFFF;
  --bg-card:      var(--zinc-100);
  --bg-elevated:  #FFFFFF;

  --tint:         var(--olive-600);
  --tint-light:   rgba(253, 253, 150, 0.40);
  --tint-fg:      #FFFFFF;

  --fg:           var(--olive-600);
  --fg-2:         var(--zinc-500);
  --fg-3:         var(--zinc-400);

  --border:       var(--zinc-200);
  --border-light: var(--zinc-100);
  --icon:         var(--olive-600);

  --success:      var(--green-500);
  --success-light:var(--green-100);
  --success-dark: var(--green-700);
  --error:        var(--red-500);
  --error-light:  var(--red-100);
  --error-dark:   var(--red-700);
  --streak:       var(--amber-500);
  --streak-light: rgba(245, 158, 11, 0.12);

  --overlay:      rgba(0, 0, 0, 0.40);
  --skeleton:     var(--zinc-200);

  /* -- Gradient ---------------------------------------------------------- */
  --cta-gradient: linear-gradient(90deg, #FDFD96 0%, #F5F060 100%);
  --xp-gradient:  linear-gradient(90deg, #F59E0B 0%, #FDFD96 100%);

  /* -- Type — Family ---------------------------------------------------- */
  --font-sans: "Lexend", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* -- Type — Weights --------------------------------------------------- */
  --w-light:      300;
  --w-regular:    400;
  --w-medium:     500;
  --w-semibold:   600;
  --w-bold:       700;
  --w-extrabold:  800;

  /* -- Spacing scale ---------------------------------------------------- */
  --sp-xs:  4px;
  --sp-sm:  8px;
  --sp-md:  12px;
  --sp-lg:  16px;
  --sp-xl:  20px;
  --sp-2xl: 24px;
  --sp-3xl: 32px;
  --sp-4xl: 40px;
  --sp-5xl: 48px;

  /* -- Radius ----------------------------------------------------------- */
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   16px;
  --r-xl:   20px;
  --r-2xl:  24px;
  --r-full: 9999px;

  /* -- Shadows ---------------------------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.09);
  --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.12);
}

/* ---------- Dark theme --------------------------------------------------- */
[data-theme="dark"],
:root.dark {
  --bg:           #121212;
  --bg-card:      var(--olive-600);
  --bg-elevated:  #2B2B12;

  --tint:         var(--yellow-400);
  --tint-light:   rgba(253, 253, 150, 0.15);
  --tint-fg:      var(--olive-600);

  --fg:           #FFFFFF;
  --fg-2:         var(--zinc-400);
  --fg-3:         var(--zinc-500);

  --border:       rgba(253, 253, 150, 0.22);
  --border-light: rgba(255, 255, 255, 0.07);
  --icon:         var(--yellow-400);

  --success-light:rgba(34, 197, 94, 0.15);
  --error-light:  rgba(239, 68, 68, 0.15);
  --streak:       var(--amber-400);
  --streak-light: rgba(245, 158, 11, 0.15);

  --overlay:      rgba(0, 0, 0, 0.60);
  --skeleton:     rgba(255, 255, 255, 0.06);
}

/* ---------- Base type ---------------------------------------------------- */
html, body {
  font-family: var(--font-sans);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---------- Semantic type roles ------------------------------------------ */
.t-hero {
  font-family: var(--font-sans);
  font-weight: var(--w-extrabold);
  font-size: 36px;
  line-height: 42px;
  letter-spacing: -1px;
  color: var(--fg);
}
.t-title {
  font-family: var(--font-sans);
  font-weight: var(--w-bold);
  font-size: 28px;
  line-height: 34px;
  letter-spacing: -0.5px;
  color: var(--fg);
}
.t-subtitle {
  font-family: var(--font-sans);
  font-weight: var(--w-semibold);
  font-size: 18px;
  line-height: 24px;
  letter-spacing: -0.2px;
  color: var(--fg);
}
.t-body {
  font-family: var(--font-sans);
  font-weight: var(--w-regular);
  font-size: 15px;
  line-height: 22px;
  color: var(--fg);
}
.t-body-semibold {
  font-family: var(--font-sans);
  font-weight: var(--w-semibold);
  font-size: 15px;
  line-height: 22px;
  color: var(--fg);
}
.t-caption {
  font-family: var(--font-sans);
  font-weight: var(--w-medium);
  font-size: 13px;
  line-height: 18px;
  color: var(--fg-2);
}
.t-link {
  font-family: var(--font-sans);
  font-weight: var(--w-medium);
  font-size: 15px;
  line-height: 22px;
  color: var(--tint);
}
.t-overline {
  font-family: var(--font-sans);
  font-weight: var(--w-semibold);
  font-size: 11px;
  line-height: 16px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--fg-3);
}