/* ============================================================================
   Design tokens: base layer (book-theme.css remaps the palette and loads last)
   Inherited from an earlier product design system: extracted from its globals.css and
   (site)/landing.css, reconciled into one clean, layered set.

   Palette in one line:
     Baby Blue leads · Royal Blue is trust · Sunshine Yellow is the glow ·
     Deep Navy grounds the ink · ice-white breathes.
   One face everywhere: Instrument Sans.

   Layers:  1) primitives (raw values)  2) semantic roles  3) component tokens
   Use SEMANTIC tokens in product/app work; use primitives only to define roles.
   ========================================================================== */

:root {
  /* ── 1. PRIMITIVES ──────────────────────────────────────────────────────
     Named by hue + numeric weight. Never reference these directly in UI;
     reference the semantic roles below. */

  /* Navy — the ground of intelligence (ink) */
  --navy-900: #14304D;   /* base ink */
  --navy-800: #1D3E5F;   /* lifted navy — panels on dark */
  --navy-700: #27506F;   /* hairline on dark grounds */
  --navy-600: #35557A;   /* soft ink */
  --navy-500: #48657F;   /* secondary text (ink-dim) */
  --navy-300: #7D92A6;   /* tertiary text / hints (ink-faint) */
  --navy-body: #B9CDE0;  /* body text on deep navy */
  --navy-faint: #7C9AB8; /* faint text on deep navy */

  /* Sky — baby blue, the signature accent (PLAN) */
  --sky-500: #4A9DE0;
  --sky-tint: #EAF4FE;
  --sky-wash: #E9F2FA;

  /* Royal — blue, trust (calibration, verified, PROGRESS-verified) */
  --blue-600: #1E5FB8;   /* text-safe royal on blue-tint (AA) */
  --blue-500: #2E7FE6;
  --blue-tint: #E8F0FD;

  /* Honey — sunshine yellow, the glow (PREPARE · CTAs · highlights) */
  --honey-bright: #FFB81C;  /* fills, buttons, the glow */
  --honey-hover: #FFC63F;   /* brighter sunshine — hover / on dark */
  --honey-600: #A87700;     /* accent TEXT on light (AA) */
  --honey-700: #8A6100;     /* text-safe honey on honey-tint (AA) */
  --honey-tint: #FFF3D6;    /* sunshine wash */

  /* Teal — life & growth (PROGRESS) */
  --teal-500: #12B3B3;      /* fills / strokes only */
  --teal-700: #0B7D7D;      /* text-safe teal on white (AA) */
  --teal-tint: #E0F4F4;

  /* Coral — exam-day energy (PERFORM) */
  --coral-500: #E2544B;
  --coral-tint: #FDECEA;
  --bad-500: #C24941;       /* error / destructive text */

  /* Grounds & neutrals */
  --ice: #F7FAFD;           /* app canvas — ice white with a blue breath */
  --white: #FFFFFF;
  --panel-2: #EDF4FB;       /* baby-blue surface */
  --line: #DBE7F1;          /* borders, dividers (cool hairline) */

  /* ── 2. SEMANTIC ROLES ──────────────────────────────────────────────────
     What the color MEANS. This is what product code should use. */

  --bg: var(--ice);                 /* page background */
  --surface: var(--white);          /* cards, panels */
  --surface-2: var(--panel-2);      /* nested / muted surface */
  --surface-sky: var(--sky-wash);   /* baby-blue section wash */
  --hairline: var(--line);

  --text: var(--navy-900);          /* primary text */
  --text-2: var(--navy-500);        /* secondary text */
  --text-3: var(--navy-300);        /* tertiary / hints */

  --brand: var(--honey-bright);     /* the lead accent — CTAs, glow */
  --brand-ink: var(--navy-900);     /* text ON honey (for contrast) */
  --brand-text: var(--honey-600);   /* honey used as TEXT on light */
  --accent-sky: var(--sky-500);     /* signature baby blue */
  --accent-trust: var(--blue-500);  /* royal — trust / calibration */

  --focus-ring: var(--sky-500);
  --danger: var(--bad-500);

  /* Deep-navy ground (dark sections / hero-on-ink) */
  --dark-bg: var(--navy-900);
  --dark-surface: var(--navy-800);
  --dark-hairline: var(--navy-700);
  --dark-text: var(--white);
  --dark-text-2: var(--navy-body);
  --dark-text-3: var(--navy-faint);
  --dark-brand: var(--honey-hover); /* honey reads brighter on dark */

  /* ── Chapter accents ─────────────────────────────────────────────────────
     The four chapters each carry one accent. Use for section eyebrows,
     nav groups, icon chips — never more than one chapter accent per surface. */
  --chapter-plan: var(--sky-500);     /* PLAN     — baby blue */
  --chapter-prepare: var(--honey-bright); /* PREPARE — sunshine */
  --chapter-perform: var(--coral-500);    /* PERFORM — coral */
  --chapter-progress: var(--teal-500);    /* PROGRESS — teal */

  /* ── 3. TYPOGRAPHY ──────────────────────────────────────────────────────
     One face: Instrument Sans. (In the app it is loaded via the
     --font-geist-sans variable — a legacy name; the face is Instrument Sans.) */
  --font-sans: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", monospace;

  --text-xs: 12.5px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-lg: 19px;   /* lead paragraph */
  --text-xl: 24px;
  --text-2xl: 30px;
  --text-3xl: 38px;
  --text-4xl: 48px;
  --text-hero: 64px;

  --leading-tight: 1.08;  /* headings */
  --leading-body: 1.6;    /* body */

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600; /* display / headings / CTAs */
  --weight-bold: 700;     /* big marketing headlines */

  --track-eyebrow: 0.14em;  /* uppercase eyebrows / kickers */
  --track-wordmark: 0.04em; /* lowercase wordmark */
  --track-display: -0.015em;
  --track-headline: -0.02em;

  /* ── 4. SPACE · RADIUS · ELEVATION ──────────────────────────────────────
     4px base grid. */
  --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-28: 110px;

  --radius-chip: 12px;   /* icon chips */
  --radius-card: 16px;   /* panels, cards */
  --radius-focus: 6px;
  --radius-pill: 999px;  /* buttons, badges — "the reference speaks in pills" */

  --shadow-sm: 0 1px 2px rgba(20, 48, 77, 0.04);
  --shadow-panel: 0 1px 2px rgba(20, 48, 77, 0.04), 0 12px 32px -10px rgba(20, 48, 77, 0.09);
  --shadow-panel-hover: 0 2px 4px rgba(20, 48, 77, 0.05), 0 20px 44px -14px rgba(20, 48, 77, 0.15);
  --shadow-honey: 0 1px 2px rgba(20, 48, 77, 0.1), 0 6px 18px -6px rgba(255, 184, 28, 0.6);

  /* ── 5. ATMOSPHERE (signature gradients & glows) ────────────────────────
     Reserve for hero / "universe" moments — never inside the logo mark. */
  --aurora: radial-gradient(circle at 12% 0%, rgba(74,157,224,0.12), transparent 26rem),
            radial-gradient(circle at 88% 6%, rgba(255,184,28,0.09), transparent 24rem),
            linear-gradient(160deg, #F5FAFF 0%, #FDFAF1 55%, #F5FAFF 100%);
  --glow-honey: radial-gradient(circle, rgba(255,184,28,0.85), rgba(255,184,28,0) 70%);
  --glow-sky: radial-gradient(circle, rgba(74,157,224,0.45), rgba(74,157,224,0) 70%);
  --grad-section-rule: linear-gradient(90deg, var(--sky-500) 0%, var(--honey-bright) 60%, transparent 100%);

  /* ── 6. MOTION ──────────────────────────────────────────────────────────
     Calm, honey-paced, never gamified. Everything respects reduced-motion. */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-press: 0.12s;
  --dur-fast: 0.15s;
  --dur-base: 0.2s;
  --dur-rise: 0.55s;
}