/* ============================================================
   Gravity Design System — Colors & Type
   A friendly, cozy, etched language-learning app
   ============================================================ */

/* ---------- Webfonts ----------
   Gravity uses two type families:
   1) A high-contrast serif for display ("gravity" wordmark, screen titles)
   2) A soft, humanist sans for body, UI, numerics
   -------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700;800&display=swap');

:root {
  /* ============================================================
     COLORS — Paper, Mascot, Mission accents
     The vibe: a sun-bleached page in a children's book.
     Warm cream paper, blush pink mascot tones, soft pastel
     mission accents. Nothing saturated. Nothing harsh.
     ============================================================ */

  /* — Paper / Surface (the canvas) — */
  --paper-50:  #FFFFFF;   /* SHEET — raised cards in light mode */
  --paper-100: #FBE7DD;   /* BLUSH — page bg under backdrop */
  --paper-200: #F6E0D2;   /* mid gradient stop / sand dunes */
  --paper-300: #F4ECE0;   /* warm wash */
  --paper-400: #E2D4BA;   /* border on tinted card */

  /* — Cream — text on coral CTAs, never page bg — */
  --cream: #FFF5EB;

  /* — Ink / Foreground (warm paper-brown) — */
  --ink-900: #3A2A24;     /* INK — primary text */
  --ink-700: #7A5F55;     /* INK_SOFT — body */
  --ink-500: rgba(58, 42, 36, 0.50);  /* INK_MUTED */
  --ink-400: rgba(58, 42, 36, 0.35);
  --ink-300: rgba(58, 42, 36, 0.25);  /* INK_DOT — unfilled dot grids */

  /* — Blush / Coral (mascot pink, primary accent) — */
  --blush-50:  #FCEFEC;
  --blush-100: #F9DDD5;
  --blush-200: #F4C5BB;
  --blush-300: #EDA89A;   /* CTA hover */
  --blush-400: #E78866;   /* CTA — primary coral (matches tokens.ts CORAL) */
  --blush-500: #D86E4D;   /* CTA pressed (matches tokens.ts CORAL_DEEP) */

  /* — Sage (vocabulary, "learn") — */
  --sage-50:  #EFF1E7;
  --sage-100: #DDE3CD;
  --sage-200: #C4CDA8;
  --sage-300: #A4B383;

  /* — Lavender (review, "deck") — */
  --lavender-50:  #EFEAF1;
  --lavender-100: #DDD4E1;
  --lavender-200: #C5B7CC;
  --lavender-300: #A795B0;

  /* — Butter (audio, "speaking") — */
  --butter-50:  #FAF1DC;
  --butter-100: #F4E3B6;
  --butter-200: #ECD089;
  --butter-300: #D9B660;

  /* — Peach (grammar, missions) — */
  --peach-50:  #FCE9DC;
  --peach-100: #F7D2B5;
  --peach-200: #F0B582;
  --peach-300: #E2965A;

  /* — Sky (info, neutral accent) — */
  --sky-50:  #E6EBEC;
  --sky-100: #CBD4D7;
  --sky-200: #A4B3B8;

  /* — Night (dark mode — mascot's cosmic home) — */
  --night-deep:    #0A0E22;   /* darkest gradient stop */
  --night-base:    #0E1226;   /* page bg / blush in dark */
  --night-mid:     #141A38;   /* mid gradient stop */
  --night-sheet:   #1B2140;   /* raised cards, bubbles */
  --indigo-glow:   rgba(70, 92, 168, 0.30);
  --violet-haze:   rgba(120, 86, 180, 0.22);
  --coral-warmth:  rgba(232, 142, 110, 0.16);

  /* Hotter coral that glows on indigo (used in dark mode) */
  --coral-hot:     #F58A65;
  --coral-deep:    #E5704A;

  /* — Streak/Flame (gamification orange) — */
  --flame: #E78A4E;
  --star:  #D9A85F;       /* xp/star yellow-gold */

  /* ============================================================
     SEMANTIC COLOR TOKENS
     Use these in components, not the raw scales above.
     ============================================================ */

  /* Backgrounds */
  --bg-app:        var(--paper-100);
  --bg-surface:    var(--paper-50);
  --bg-sunken:     var(--paper-200);   /* the wavy ground */
  --bg-tint:       var(--paper-200);   /* tinted cards */

  /* Foreground */
  --fg-1: var(--ink-900);   /* headings */
  --fg-2: var(--ink-700);   /* body */
  --fg-3: var(--ink-500);   /* captions, supporting */
  --fg-4: var(--ink-400);   /* placeholder, disabled */

  /* Borders / hairlines (always thin & warm) */
  --border-hair:    rgba(58, 42, 36, 0.10);  /* INK_LINE */
  --border-soft:    rgba(58, 42, 36, 0.16);  /* card border */
  --border-strong:  rgba(58, 42, 36, 0.28);  /* focused */

  /* Brand */
  --brand:         var(--blush-400);          /* salmon coral */
  --brand-hover:   var(--blush-300);
  --brand-pressed: var(--blush-500);
  --brand-fg:      var(--cream);              /* CREAM — text on coral */

  /* Status */
  --success: #7A9A5B;    /* sage but slightly more saturated */
  --warning: var(--peach-300);
  --danger:  #C26A5A;
  --info:    var(--sky-200);

  /* Module accents (mission categories) */
  --accent-vocab:    var(--sage-200);
  --accent-grammar:  var(--peach-200);
  --accent-speaking: var(--butter-200);
  --accent-review:   var(--lavender-200);
  --accent-capture:  var(--sage-100);

  /* ============================================================
     TYPOGRAPHY
     Fraunces (display serif, 9..144 optical sizing)
     Nunito (UI sans, soft humanist)
     ============================================================ */

  --font-display: 'Fraunces', 'Cormorant Garamond', Georgia, serif;
  --font-sans:    'Nunito', -apple-system, BlinkMacSystemFont, 'SF Pro', sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, Menlo, monospace;

  /* Type scale (mobile-first; bump up for marketing/web) */
  --text-12: 0.75rem;   /* 12 — micro caption */
  --text-13: 0.8125rem; /* 13 — caption */
  --text-14: 0.875rem;  /* 14 — small body / UI */
  --text-15: 0.9375rem; /* 15 — supporting */
  --text-16: 1rem;      /* 16 — body */
  --text-18: 1.125rem;  /* 18 — list title */
  --text-20: 1.25rem;   /* 20 — card title */
  --text-24: 1.5rem;    /* 24 — h3 */
  --text-28: 1.75rem;   /* 28 — h2 */
  --text-32: 2rem;      /* 32 — h1 / screen title */
  --text-44: 2.75rem;   /* 44 — display */
  --text-64: 4rem;      /* 64 — hero wordmark */

  /* Weights */
  --w-regular: 400;
  --w-medium:  500;
  --w-semi:    600;
  --w-bold:    700;
  --w-black:   800;

  /* Leading / tracking */
  --lh-tight:  1.1;
  --lh-snug:   1.25;
  --lh-normal: 1.45;
  --lh-relaxed: 1.6;

  --tracking-tight: -0.02em;   /* display serif */
  --tracking-normal: 0;
  --tracking-wide: 0.04em;     /* small caps / labels */

  /* ============================================================
     SPACING — 4px base, named scale
     ============================================================ */
  --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;

  /* ============================================================
     RADII — generous, paper-soft
     ============================================================ */
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   20px;
  --radius-2xl:  24px;
  --radius-pill: 999px;

  /* ============================================================
     SHADOWS — Soft, low, never crisp.
     The aesthetic is paper on paper, not glass on glass.
     ============================================================ */
  --shadow-xs:   0 1px 0 rgba(46, 42, 36, 0.04);
  --shadow-sm:   0 1px 2px rgba(46, 42, 36, 0.05), 0 1px 1px rgba(46, 42, 36, 0.03);
  --shadow-md:   0 4px 12px rgba(46, 42, 36, 0.06), 0 2px 4px rgba(46, 42, 36, 0.04);
  --shadow-lg:   0 12px 28px rgba(46, 42, 36, 0.08), 0 4px 10px rgba(46, 42, 36, 0.04);
  --shadow-cta:  0 6px 14px rgba(217, 116, 95, 0.22);   /* salmon glow */

  /* Inner shadow for "etched" inputs */
  --shadow-inset: inset 0 1px 2px rgba(46, 42, 36, 0.06);

  /* ============================================================
     MOTION
     Soft, slow, generous. Like a sigh.
     ============================================================ */
  --ease-out:  cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);  /* mascot bounce */

  --dur-fast: 140ms;
  --dur-base: 240ms;
  --dur-slow: 420ms;
  --dur-mascot: 700ms;
}

/* ============================================================
   DARK MODE — "Ink-night"
   The night the axolotl-in-UFO actually lives in. Indigo with a
   warmer coral CTA. Engages via [data-theme="dark"] on <html> or
   any ancestor; falls back to prefers-color-scheme.
   ============================================================ */
[data-theme="dark"] {
  /* Foreground — cool near-white instead of warm cream paper */
  --fg-1: #F4F2FF;                      /* INK */
  --fg-2: #BCC0E0;                      /* INK_SOFT (pale indigo) */
  --fg-3: rgba(244, 242, 255, 0.55);    /* INK_MUTED (slight bump) */
  --fg-4: rgba(244, 242, 255, 0.30);

  /* Surfaces */
  --bg-app:     var(--night-base);      /* #0E1226 */
  --bg-surface: var(--night-sheet);     /* #1B2140 */
  --bg-sunken:  var(--night-deep);      /* #0A0E22 */
  --bg-tint:    rgba(244, 225, 196, 0.05);

  /* Borders / hairlines — cream-tinted, very low alpha */
  --border-hair:   rgba(244, 242, 255, 0.10);
  --border-soft:   rgba(244, 242, 255, 0.16);
  --border-strong: rgba(244, 242, 255, 0.28);

  /* Brand — hotter coral so it glows against indigo */
  --brand:         var(--coral-hot);    /* #F58A65 */
  --brand-hover:   #FF9E7C;
  --brand-pressed: var(--coral-deep);   /* #E5704A */
  --brand-fg:      #FFF5EB;             /* CREAM stays cream on coral */

  /* Tile / chip backgrounds */
  --paper-50:  var(--night-sheet);
  --paper-100: var(--night-base);
  --paper-200: rgba(244, 225, 196, 0.05);
  --paper-300: rgba(244, 225, 196, 0.11);
  --paper-400: rgba(244, 225, 196, 0.18);

  /* Shadows — deeper than black so coral halos still read */
  --shadow-xs:  0 1px 0 rgba(0, 11, 31, 0.4);
  --shadow-sm:  0 2px 6px rgba(0, 11, 31, 0.5), 0 1px 2px rgba(0, 11, 31, 0.4);
  --shadow-md:  0 6px 18px rgba(0, 11, 31, 0.55), 0 2px 6px rgba(0, 11, 31, 0.4);
  --shadow-lg:  0 16px 40px rgba(0, 11, 31, 0.6), 0 6px 14px rgba(0, 11, 31, 0.45);
  --shadow-cta: 0 8px 22px rgba(245, 138, 101, 0.45);
  --shadow-inset: inset 0 1px 2px rgba(0, 11, 31, 0.4);

  /* Module accents — softened so they sit politely on indigo */
  --accent-vocab:    rgba(164, 179, 131, 0.22);
  --accent-grammar:  rgba(240, 181, 130, 0.20);
  --accent-speaking: rgba(236, 208, 137, 0.20);
  --accent-review:   rgba(167, 149, 176, 0.22);
  --accent-capture:  rgba(196, 205, 168, 0.18);
}

/* Auto-engage dark mode when the OS prefers it (only if author hasn't
   explicitly set [data-theme="light"]) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fg-1: #F4F2FF;
    --fg-2: #BCC0E0;
    --fg-3: rgba(244, 242, 255, 0.55);
    --fg-4: rgba(244, 242, 255, 0.30);
    --bg-app:     var(--night-base);
    --bg-surface: var(--night-sheet);
    --bg-sunken:  var(--night-deep);
    --bg-tint:    rgba(244, 225, 196, 0.05);
    --border-hair:   rgba(244, 242, 255, 0.10);
    --border-soft:   rgba(244, 242, 255, 0.16);
    --border-strong: rgba(244, 242, 255, 0.28);
    --brand:         var(--coral-hot);
    --brand-hover:   #FF9E7C;
    --brand-pressed: var(--coral-deep);
    --brand-fg:      #FFF5EB;
    --paper-50:  var(--night-sheet);
    --paper-100: var(--night-base);
    --paper-200: rgba(244, 225, 196, 0.05);
    --paper-300: rgba(244, 225, 196, 0.11);
    --shadow-cta: 0 8px 22px rgba(245, 138, 101, 0.45);
  }
}

/* ============================================================
   COSMIC BACKDROP — paint over a dark-mode scene to get the
   space-night with planet blobs + sparkle dots.
   Mark the screen <div class="cosmic-bg"> ... </div>
   ============================================================ */
.cosmic-bg {
  position: relative;
  background:
    radial-gradient(ellipse at 50% 100%, var(--night-deep) 0%, transparent 70%),
    linear-gradient(180deg, #0E1226 0%, #141A38 50%, #0A0E22 100%);
  overflow: hidden;
}
.cosmic-bg::before {
  /* indigo planet glow, top-right */
  content: ""; position: absolute; pointer-events: none;
  width: 320px; height: 320px; border-radius: 50%;
  top: -80px; right: -120px;
  background: radial-gradient(circle, rgba(70, 92, 168, 0.30) 0%, transparent 65%);
}
.cosmic-bg::after {
  /* violet haze planet, bottom-left */
  content: ""; position: absolute; pointer-events: none;
  width: 380px; height: 380px; border-radius: 50%;
  bottom: -120px; left: -140px;
  background: radial-gradient(circle, rgba(120, 86, 180, 0.22) 0%, transparent 65%);
}

/* ============================================================
   SEMANTIC ELEMENT STYLES
   Drop-in defaults for prose. Use class utilities for UI.
   ============================================================ */

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

h1, .h1 {
  font-family: var(--font-display);
  font-weight: var(--w-regular);
  font-size: var(--text-32);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
  font-variation-settings: "opsz" 96;
}

h2, .h2 {
  font-family: var(--font-display);
  font-weight: var(--w-regular);
  font-size: var(--text-28);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
  font-variation-settings: "opsz" 72;
}

h3, .h3 {
  font-family: var(--font-display);
  font-weight: var(--w-medium);
  font-size: var(--text-24);
  line-height: var(--lh-snug);
  color: var(--fg-1);
  font-variation-settings: "opsz" 48;
}

h4, .h4 {
  font-family: var(--font-sans);
  font-weight: var(--w-bold);
  font-size: var(--text-18);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

.display {
  font-family: var(--font-display);
  font-weight: var(--w-regular);
  font-size: var(--text-44);
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-tight);
  color: var(--fg-1);
  font-variation-settings: "opsz" 144;
}

.wordmark {
  font-family: var(--font-display);
  font-weight: var(--w-regular);
  font-size: var(--text-64);
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--fg-1);
  font-variation-settings: "opsz" 144;
}

p, .body {
  font-family: var(--font-sans);
  font-weight: var(--w-regular);
  font-size: var(--text-16);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
  text-wrap: pretty;
}

.body-sm {
  font-size: var(--text-14);
  line-height: var(--lh-normal);
  color: var(--fg-3);
}

.caption {
  font-size: var(--text-13);
  color: var(--fg-3);
  letter-spacing: 0.01em;
}

.label {
  font-family: var(--font-sans);
  font-weight: var(--w-semi);
  font-size: var(--text-14);
  color: var(--fg-2);
  letter-spacing: 0.005em;
}

.eyebrow {
  font-family: var(--font-sans);
  font-weight: var(--w-semi);
  font-size: var(--text-12);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--fg-3);
}

code, .mono {
  font-family: var(--font-mono);
  font-size: 0.95em;
  background: var(--paper-200);
  border-radius: var(--radius-sm);
  padding: 0.1em 0.35em;
}

/* ============================================================
   PAPER TEXTURE (optional utility)
   Many backgrounds use a faint warm noise to feel like paper.
   ============================================================ */
.paper-texture {
  background-color: var(--paper-100);
  background-image:
    radial-gradient(circle at 20% 10%, rgba(255, 235, 210, 0.4) 0%, transparent 40%),
    radial-gradient(circle at 80% 90%, rgba(244, 197, 187, 0.18) 0%, transparent 40%);
}