/* 10Talents Learning — design tokens (single source of truth).
 *
 * DS-01. This file is the canonical token layer for EVERY surface — the SPA
 * (public/index.html), the marketing site (landing.html), the admin console
 * (admin.html), the co-op pages, and the legal/auth pages (via
 * brand/site-chrome.css). Edit brand values HERE and nowhere else.
 *
 * July 2026 — "Bright" overhaul. The identity moved from a muted warm-cream
 * editorial system to a bright, clean, playful dashboard system: a cool
 * lavender-gray canvas, white cards with soft diffuse shadows, generous
 * rounding, pastel color-coding, a friendly violet primary accent, and a bold
 * rounded sans (Poppins) for display type. Every surface re-skins from these
 * values; component CSS references the tokens, so the cascade does the work.
 *
 * NOT in this file: component CSS (buttons/cards/forms/nav) lives in
 * site-chrome.css + the SPA; surface-specific tokens (e.g. landing's --bg-deep,
 * the admin dark overrides) stay inline on their surface and override these.
 */

/* Display type. Imported here so every surface that links tokens.css (directly
   or via site-chrome.css) gets it without editing ~20 individual <link>s. */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

:root {
  /* Canvas — a bright, cool lavender-gray page with pure-white cards. The
     tint lives on the PAGE; raised surfaces (cards, sheets) are white so they
     pop cleanly, exactly like the reference dashboard. */
  --bg: oklch(96.5% 0.008 286);
  --bg-raised: oklch(100% 0 0);
  --bg-sunken: oklch(94% 0.012 286);
  --bg-panel: oklch(99% 0.004 286);

  /* Ink — cool near-black heading + text ramp (never pure black). */
  --ink: oklch(27% 0.02 285);
  --ink-2: oklch(42% 0.02 285);
  --ink-3: oklch(53% 0.016 285);
  --ink-4: oklch(66% 0.014 285);

  /* Lines — cool, light hairlines. On white cards over the lavender page most
     definition comes from the shadow, so lines stay whisper-soft. */
  --line: oklch(92% 0.006 286);
  --line-2: oklch(88% 0.008 286);
  --line-strong: oklch(80% 0.012 286);

  /* Primary accent — friendly violet. TIERED: the --violet-* ramp is the
     PRIMITIVE (raw values); the role tokens reference it. Repointing here is a
     visual no-op — it seeds the primitive→semantic pattern the rest of the
     palette will adopt (plan 09, §3). Drives active nav, badges, focus, buttons. */
  --violet-50:  oklch(99% 0.01 293);    /* near-white label on --accent */
  --violet-100: oklch(94% 0.045 293);   /* lavender tint (pills/chips) */
  --violet-500: oklch(55% 0.19 293);    /* accent base */
  --violet-600: oklch(49% 0.19 293);    /* accent hover */
  --violet-700: oklch(46% 0.17 293);    /* text on the lavender tint */
  --accent: var(--violet-500);
  --accent-ink: var(--violet-50);
  --accent-hover: var(--violet-600);
  --accent-soft: var(--violet-100);
  --accent-soft-ink: var(--violet-700);

  /* Money-moment CTA. Was honey gold, so that "sign up / upgrade / checkout"
     stood apart from the violet primary. Owner-directed 2026-08-10: one button
     colour across every surface — a gold hero CTA sitting under a violet nav
     "Start free" read as two different products, not as emphasis. The role
     tokens stay so the money moments remain nameable in markup and can be
     repointed again from this one place. */
  --cta: var(--accent);
  --cta-ink: var(--accent-ink);
  --cta-hover: var(--accent-hover);

  /* Pastel accent families — the card / subject / child color-coding set, now
     bright pastels to match the reference. Each: full pastel + -soft tint
     (card & chip backgrounds) + -ink (readable text on the tint). */
  --sage: oklch(70% 0.14 158);            /* mint */
  --sage-soft: oklch(92% 0.07 158);
  --sage-ink: oklch(42% 0.10 158);

  --gold: oklch(82% 0.13 85);             /* butter / cream */
  --gold-soft: oklch(94% 0.06 88);
  --gold-ink: oklch(45% 0.09 68);

  --clay: oklch(72% 0.13 356);            /* pink */
  --clay-soft: oklch(93% 0.055 356);
  --clay-ink: oklch(46% 0.13 358);

  --sky: oklch(68% 0.13 245);             /* blue */
  --sky-soft: oklch(93% 0.05 245);
  --sky-ink: oklch(43% 0.11 250);

  --plum: oklch(62% 0.17 300);            /* lavender (aligned to accent hue) */
  --plum-soft: oklch(93% 0.06 300);
  --plum-ink: oklch(45% 0.14 300);

  /* Semantic states — brightened to sit in the new palette; status ONLY,
     never decoration. Each family carries: the signal color (dots, borders,
     icons, bar fills), a -soft tint (status chip / banner backgrounds), and a
     -ink readable-text variant. The -ink is the semantic parallel to the
     pastel -ink variants: dark enough to clear WCAG AA (>=4.5:1) as small text
     on white cards, the canvas, AND its own -soft tint — so status text never
     has to borrow a pastel ink (rulebook §4: mint != success). */
  --success: oklch(64% 0.15 158);
  --success-soft: oklch(92% 0.07 158);
  --success-ink: oklch(43% 0.13 158);
  --warn: oklch(80% 0.14 82);
  --warn-soft: oklch(94% 0.07 85);
  --warn-ink: oklch(47% 0.10 75);
  --error: oklch(60% 0.19 25);
  --error-soft: oklch(94% 0.05 25);
  --error-ink: oklch(48% 0.17 27);
  --info: oklch(66% 0.13 255);
  --info-soft: oklch(93% 0.05 255);
  --info-ink: oklch(45% 0.13 255);

  /* Elevation — soft, diffuse, cool-tinted. Cards read as gently floating on
     the lavender page; no hard drop shadows. Buttons get a colored lift. */
  --shadow-sm: 0 1px 2px oklch(50% 0.03 286 / 0.06);
  --shadow: 0 2px 6px oklch(50% 0.04 286 / 0.06), 0 14px 32px -14px oklch(50% 0.06 290 / 0.20);
  --shadow-lg: 0 10px 44px -14px oklch(50% 0.07 292 / 0.26);
  --shadow-btn: 0 1px 2px oklch(50% 0.18 293 / 0.20), 0 6px 16px -6px oklch(50% 0.18 293 / 0.36);
  --shadow-btn-hover: 0 2px 4px oklch(50% 0.18 293 / 0.24), 0 10px 24px -8px oklch(50% 0.18 293 / 0.50);
  /* The CTA lift follows the CTA fill — a warm shadow under a violet button
     reads as a rendering bug. */
  --shadow-cta: var(--shadow-btn);
  --shadow-cta-hover: var(--shadow-btn-hover);

  /* Type ramp — bold rounded sans (Poppins) for display/headings, Inter for
     everything interactive and body, JetBrains Mono for codes/dates. */
  --font-ui: 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-display: 'Poppins', 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* Type scale — role tokens on a ~1.2 modular ramp (matches the rulebook §5).
     Reference these in components instead of raw px so sizing stays consistent.
     Weights: display/h1 400–600 · h2 500 · h3+ 500 heading / 400 body / 600 emphasis. */
  --fs-display: 2.25rem;  --lh-display: 2.75rem;   /* dashboard greeting */
  --fs-h1: 1.75rem;       --lh-h1: 2.25rem;        /* page titles */
  --fs-h2: 1.375rem;      --lh-h2: 1.875rem;       /* major sections */
  --fs-h3: 1.125rem;      --lh-h3: 1.625rem;       /* subsections */
  --fs-body: 1rem;        --lh-body: 1.5rem;       /* paragraphs, table cells */
  --fs-small: 0.875rem;   --lh-small: 1.25rem;     /* secondary text */
  --fs-micro: 0.75rem;    --lh-micro: 1.125rem;    /* metadata, badges, overlines */
  --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700;

  /* Radii — generously rounded for the soft, playful, "clean cards" feel. */
  --r-xs: 4px;            /* tight: small inputs, tiny chips */
  --r-sm: 10px;
  --r: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-btn: 12px;
  --r-pill: 999px;        /* fully-round: dots, avatars, toggles */

  /* Spacing scale (4px base). Reference --space-* for margin/padding/gap instead
     of raw px; identical-intent gaps then match across every view. */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* Density-aware spacing aliases (compact overrides below) */
  --pad: 16px;
  --pad-lg: 24px;
  --gap: 12px;
  --row-h: 40px;

  /* Shell (SPA) */
  --sidebar-w: 240px;
  --sidebar-w-compact: 216px;
  --sidebar-w-rail: 64px;   /* collapsed icon-only rail (24px icon + padding) */

  /* Compatibility aliases — legacy token names used by the static surfaces
   * (site-chrome.css, landing.html). Keep so those surfaces source from here
   * without renaming every usage. --serif now resolves to the display sans. */
  --bg-2: var(--bg-raised);
  --font: var(--font-ui);
  --serif: var(--font-display);
}

/* Density: compact (SPA Settings → Appearance) */
[data-density="compact"] {
  --pad: 10px;
  --pad-lg: 16px;
  --gap: 8px;
  --row-h: 32px;
}

/* Theme: warm (parchment / scriptural) — a cozier, warmer canvas for families
   who prefer it; keeps the violet accent for interactive parity. */
[data-theme="warm"] {
  --bg: oklch(96% 0.022 84);
  --bg-raised: oklch(99.5% 0.008 84);
  --bg-sunken: oklch(93.5% 0.03 82);
  --bg-panel: oklch(98% 0.014 84);
  --ink: oklch(27% 0.026 70);
  --line: oklch(90% 0.02 82);
}

/* Theme: bright (extra-cheerful) — pushes canvas cleaner and the accent a
   touch more saturated. */
[data-theme="bright"] {
  --bg: oklch(97.5% 0.01 286);
  --bg-sunken: oklch(95% 0.014 286);
  --accent: oklch(57% 0.21 293);
  --accent-hover: oklch(51% 0.21 293);
  --sage: oklch(72% 0.15 158);
  --clay: oklch(74% 0.14 356);
  --sky: oklch(70% 0.14 245);
}