/* =============================================================================
 * tokens.css — design system primitives (colours, typography, spacing, shape)
 * =============================================================================
 *
 * Authoritative source: docs/design-system-spec.md §§1-5. Every value below
 * is copied verbatim from the spec — do not edit in place without a matching
 * spec amendment. Components and views reference these custom properties
 * only; no raw hex, rem, or magic numbers in component CSS.
 *
 * Semantic tokens (--color-bg, --color-surface, …) map the raw palette onto
 * the roles the design system exposes to components. Swap a semantic token
 * to reskin the platform without touching the palette scale.
 * ============================================================================= */

:root {
    /* --- Palette: Charcoal (warm dark) --- */
    --charcoal-50:  #F7F6F5;
    --charcoal-100: #E8E6E4;
    --charcoal-200: #D4D1CE;
    --charcoal-300: #A9A5A0;
    --charcoal-400: #7A7570;
    --charcoal-500: #5C5752;
    --charcoal-600: #454240;
    --charcoal-700: #3A3632;
    --charcoal-800: #2C2825;
    --charcoal-900: #1E1B19;

    /* --- Palette: Terracotta (primary accent)
     *   600 anchored on #C85A32 (brand hex per Stitch DESIGN.md). Shades above
     *   and below derived from that anchor. --- */
    --terracotta-50:  #FEF4EF;
    --terracotta-100: #FBE4D6;
    --terracotta-200: #F6C8AC;
    --terracotta-300: #EFA67D;
    --terracotta-400: #E58855;
    --terracotta-500: #D96B3B;
    --terracotta-600: #C85A32;
    --terracotta-700: #A64822;
    --terracotta-800: #82371A;
    --terracotta-900: #5F2813;

    /* --- Palette: Cream (warm neutral)
     *   100 = page canvas, 400 = sidebar (eye-dropped from Stitch mock).
     *   300 track for pixel bars. --- */
    --cream-50:  #FCFAF6;
    --cream-100: #F7F6F2;
    --cream-200: #F2EFE7;
    --cream-300: #E8E6E1;
    --cream-400: #E3DCC8;
    --cream-500: #D8D1BC;

    /* --- Palette: Beige (warm sidebar)
     *   Sibling of the cream scale, but pulled toward the terracotta
     *   brand hue (chroma ~0.06, hue ~75°) so the sidebar reads as a
     *   warm tan rather than a cool parchment. Only the sidebar
     *   semantic tokens consume this scale; cream stays the page +
     *   surface neutral. --- */
    --beige-300: #DFD2B0;
    --beige-400: #D6C5A0;
    --beige-500: #C8B68C;

    /* --- Palette: Forest (success) --- */
    --forest-50:  #F0F7F4;
    --forest-100: #D9EBE2;
    --forest-200: #B5D8C7;
    --forest-300: #85BEA5;
    --forest-400: #5AA382;
    --forest-500: #3D8B68;
    --forest-600: #2F7054;
    --forest-700: #275A45;
    --forest-800: #224939;
    --forest-900: #1D3D30;

    /* --- Palette: Peach (warning) --- */
    --peach-50:  #FEF6F4;
    --peach-100: #FDEDE9;
    --peach-200: #FBDAD3;
    --peach-300: #F5BDB0;
    --peach-400: #EDAA99;
    --peach-500: #E08F7A;
    --peach-600: #D4735B;
    --peach-700: #B85A44;
    --peach-800: #9A4A39;
    --peach-900: #7D3E31;

    /* --- Palette: Error --- */
    --error-50:  #FEF2F2;
    --error-100: #FEE2E2;
    --error-200: #FECACA;
    --error-300: #FCA5A5;
    --error-400: #F87171;
    --error-500: #EF4444;
    --error-600: #DC2626;
    --error-700: #B91C1C;
    --error-800: #991B1B;
    --error-900: #7F1D1D;

    /* --- Palette: Teal (info / secondary) --- */
    --teal-50:  #F0FAF8;
    --teal-100: #D9F2EE;
    --teal-200: #B5E5DE;
    --teal-300: #8FD4CA;
    --teal-400: #6EC4B8;
    --teal-500: #4EB3A5;
    --teal-600: #3D9A8E;
    --teal-700: #327D74;
    --teal-800: #2A665F;
    --teal-900: #23534E;

    /* --- Semantic: page & surfaces
     *   Sidebar is now a cream tone that shares its warmth with the page
     *   (post-Stitch design). Charcoal remains available for hero cards and
     *   any future dark surfaces via --color-surface-dark. --- */
    --color-bg: var(--cream-200);
    --color-surface: #FEFCF9;  /* warm white — pure #FFF reads cold and harsh on the cream canvas */
    --color-surface-elevated: var(--cream-50);
    --color-surface-inset: var(--cream-200);
    --color-surface-dark: var(--charcoal-800);
    --color-surface-dark-gradient: var(--charcoal-700);

    /* --- Semantic: sidebar (matte near-black panel) ---
     * Settled 2026-08-02 after six owner ground trials (cream melt →
     * charcoal gradient → deep paper → clay → glossy black → flat
     * matte): a chalky matte black, charcoal-800 lifted a step toward
     * 700. The owner's liked fallback is one step darker: flat
     * var(--charcoal-800) ("remember the current matte black").
     * On-dark ink is cream, and MUTED ink is cream-100 at opacity
     * rather than a cool grey — grey read ashen/disabled on the warm
     * black; cream-at-opacity keeps the quietness but drinks in the
     * panel's warmth (the dark hero's own trick). -hover / -active-bg
     * / -accent are legacy: their only consumer is an overridden rule
     * in components/sidebar-nav.css; left as-is. */
    --color-sidebar: color-mix(in srgb, var(--charcoal-800) 60%, var(--charcoal-700));
    --color-sidebar-hover: var(--beige-400);
    --color-sidebar-active-bg: var(--beige-400);
    --color-sidebar-text: var(--cream-50);
    --color-sidebar-text-muted: rgba(247, 246, 242, 0.64);
    --color-sidebar-accent: var(--terracotta-600);

    /* --- Semantic: text --- */
    --color-text: var(--charcoal-800);
    --color-text-secondary: var(--charcoal-400);
    --color-text-muted: var(--charcoal-300);
    --color-text-on-dark: var(--cream-100);
    --color-text-on-dark-secondary: var(--charcoal-300);

    /* --- Semantic: accent (anchored on #C85A32) --- */
    --color-accent: var(--terracotta-600);
    --color-accent-hover: var(--terracotta-700);
    --color-accent-subtle: var(--terracotta-50);
    --color-accent-text: var(--terracotta-700);
    --color-accent-icon: var(--terracotta-600);
    --color-accent-glow: rgba(200, 90, 50, 0.1);
    --color-accent-icon-bg: rgba(200, 90, 50, 0.15);

    /* --- Semantic: pixel progress bar (signature pattern) ---
     *
     * Two variants in the system:
     *   Learner: uses --pixel-bar-fill (the brand accent) + --pixel-bar-empty.
     *            Per-lesson granularity; one chunk per lesson.
     *   Admin:   uses --pixel-bar-fill scoped to its component (overridden to
     *            terracotta-700 — the darker brand nuance) + --pixel-bar-progress
     *            (beige-400, the in-progress band) + --pixel-bar-empty.
     *            Aggregate granularity; one chunk per 5% band; admin contexts
     *            need three states (done / ongoing / not-started). */
    --pixel-bar-fill: var(--color-accent);
    --pixel-bar-progress: var(--beige-400);
    --pixel-bar-empty: var(--cream-300);

    /* --- Semantic: status --- */
    --color-success: var(--forest-600);
    --color-success-subtle: var(--forest-50);
    --color-success-text: var(--forest-700);
    --color-warning: var(--peach-600);
    --color-warning-subtle: var(--peach-50);
    --color-warning-text: var(--peach-700);
    --color-error: var(--error-600);
    --color-error-subtle: var(--error-50);
    --color-error-text: var(--error-700);
    --color-info: var(--teal-600);
    --color-info-subtle: var(--teal-50);
    --color-info-text: var(--teal-700);

    /* --- Semantic: borders --- */
    --color-border: var(--cream-400);
    --color-border-subtle: var(--cream-300);
    --color-border-strong: var(--charcoal-300);

    /* --- Semantic: focus ---
     * Neutral keyboard-focus ring, kept distinct from the brand accent so focus
     * reads as a quiet system indicator, not a terracotta shout. Used by the
     * :focus-visible outlines; text inputs use a darkened border instead. */
    --color-focus: var(--charcoal-700);

    /* --- Typography --- */
    --font-family: 'Montserrat', system-ui, -apple-system, sans-serif;

    /* `--text-eyebrow` formalises the small-uppercase-caption pattern
     * the project has been using as a literal across 12+ component
     * files (admin sidebar / training rows / analytics tables / report
     * cards / path summaries / etc.). 11px (0.6875rem), paired with
     * `--tracking-eyebrow` and ExtraBold weight, this is the canonical
     * eyebrow style for column headers, sidebar section labels,
     * filter labels, and field labels. */
    --text-eyebrow: 0.6875rem;
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 1.875rem;
    --text-4xl: 2.25rem;
    --text-5xl: 3rem;

    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;
    --weight-extrabold: 800;

    --leading-tight: 1.2;
    --leading-snug: 1.3;
    --leading-normal: 1.5;
    --leading-relaxed: 1.65;

    --tracking-tight: -0.02em;
    --tracking-normal: 0;
    --tracking-wide: 0.05em;
    /* Wider tracking paired with `--text-eyebrow` for small-uppercase
     * eyebrow captions and section labels. ExtraBold + 11px + 0.08em
     * is the canonical eyebrow triple used project-wide. */
    --tracking-eyebrow: 0.08em;

    /* --- Spacing --- */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;

    /* --- Shape --- */
    --radius-sm: 0.5rem;
    --radius-md: 0.75rem;
    --radius-lg: 1rem;
    --radius-xl: 1.25rem;
    --radius-2xl: 1.5rem;
    --radius-3xl: 2rem;
    --radius-full: 9999px;

    /* --- Shadows (warm-tinted, charcoal-based) --- */
    --shadow-sm: 0 2px 8px rgba(44, 40, 37, 0.06);
    --shadow-md: 0 4px 12px rgba(44, 40, 37, 0.08);
    --shadow-lg: 0 8px 24px rgba(44, 40, 37, 0.10);
    --shadow-xl: 0 16px 48px rgba(44, 40, 37, 0.12);

    /* --- Transitions ---
     * ease-out-quart is the house curve for UI motion (natural
     * deceleration, no bounce). ease-out-quint is slightly snappier and
     * used for confident, shorter feedback (button press settle). */
    --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
    --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);

    --transition-fast: 150ms var(--ease-out-quart);
    --transition-base: 200ms var(--ease-out-quart);
    --transition-slow: 300ms var(--ease-out-quart);

    /* --- Layout --- */
    --content-max-width: 1200px;
    --content-narrow: 800px;
    --sidebar-width: 240px;
    --sidebar-collapsed: 72px;
}