/* tokens.css — design tokens (UI refresh spec §1). Owner: lead.
   <html data-theme="light|dark"> is set by js/theme-boot.js before first paint.
   Components reference tokens only (no hex/rgba). Light = :root, Dark = [data-theme="dark"]. */

:root {
    color-scheme: light;
    /* Surfaces (elevation by lightness, not blur) */
    --surface-0: #fbf8f4;        /* app canvas: warm paper */
    --surface-1: #ffffff;        /* cards, sidebar, dialogs, table */
    --surface-2: #f5f0ea;        /* inset: secondary btn, row hover, input disabled */
    --surface-3: #ebe4db;        /* pressed, kbd chip, progress track */
    --surface-inverse: #1e1b2e;  /* toast */
    --scrim: rgb(30 27 46 / 0.45);

    /* Text */
    --text-1: #1e1b2e;
    --text-2: #4b4559;
    --text-3: #6a6377;           /* still >= 4.5:1 on every surface */
    --text-inverse: #f5f3fb;
    --text-brand: #7e22ce;
    --text-on-brand: #ffffff;

    /* Lines & focus */
    --border: #e6ddd2;           /* decorative dividers ONLY */
    --border-strong: #847a6d;    /* inputs, checkboxes, select: >= 3:1 */
    --focus-ring: #7e22ce;

    /* Brand gradient: purple -> pink -> orange */
    --brand-1: #7e22ce; --brand-2: #be185d; --brand-3: #c2410c;               /* FILL stops (white text >= 5.18:1) */
    --brand-text-1: #7e22ce; --brand-text-2: #be185d; --brand-text-3: #c2410c; /* gradient TEXT stops */
    --brand-soft: #f3e8ff;
    --gradient-brand: linear-gradient(135deg, var(--brand-1) 0%, var(--brand-2) 55%, var(--brand-3) 100%);
    --gradient-brand-text: linear-gradient(135deg, var(--brand-text-1) 0%, var(--brand-text-2) 55%, var(--brand-text-3) 100%);
    --shadow-brand: 0 6px 20px rgb(126 34 206 / 0.22);

    /* Rating — fg / soft bg */
    --rate-again: #b91c1c; --rate-again-soft: #fdecec;
    --rate-hard:  #92400e; --rate-hard-soft:  #fdf3dc;
    --rate-good:  #166534; --rate-good-soft:  #e7f6ec;
    --rate-easy:  #0369a1; --rate-easy-soft:  #e4f2fb;

    /* Card state */
    --state-new: #0369a1;        --state-new-soft: #e4f2fb;
    --state-learning: #9a3412;   --state-learning-soft: #fdf0e1;
    --state-relearning: #b91c1c; --state-relearning-soft: #fdecec;
    --state-review: #166534;     --state-review-soft: #e7f6ec;
    --state-young: #0f766e;      --state-young-soft: #e2f5f2;
    --state-suspended: #57534e;  --state-suspended-soft: #efebe6;
    --state-leech: #be123c;      --state-leech-soft: #fde8ee;

    /* Feedback */
    --success: #166534; --success-soft: #e7f6ec;
    --warn:    #92400e; --warn-soft:    #fdf3dc;
    --danger:  #b91c1c; --danger-soft:  #fdecec; --danger-solid: #b91c1c;
    --info:    #0369a1; --info-soft:    #e4f2fb;
    --toast-action: #d8b4fe;

    /* Data viz */
    --chart-1: #9333ea; --chart-2: #db2777; --chart-grid: var(--border);
    --heat-0: #ece6de; --heat-1: #e9d5ff; --heat-2: #c084fc; --heat-3: #9333ea; --heat-4: #6b21a8;
    --heat-edge: rgb(30 27 46 / 0.10);

    /* Elevation (warm-tinted) */
    --shadow-1: 0 1px 2px rgb(30 27 46 / 0.06), 0 1px 3px rgb(30 27 46 / 0.08);
    --shadow-2: 0 4px 12px rgb(30 27 46 / 0.08), 0 2px 4px rgb(30 27 46 / 0.05);
    --shadow-3: 0 18px 44px rgb(30 27 46 / 0.18);
}

[data-theme="dark"] {
    color-scheme: dark;
    --surface-0: #0b1020; --surface-1: #141b2f; --surface-2: #1c2440; --surface-3: #262f50;
    --surface-inverse: #f5f3fb;
    --scrim: rgb(5 8 18 / 0.70);

    --text-1: #f5f3fb; --text-2: #bcc3d4; --text-3: #949db2; --text-inverse: #1e1b2e;
    --text-brand: #d8b4fe; --text-on-brand: #ffffff;

    --border: #28314d; --border-strong: #7a84a3; --focus-ring: #e9d5ff;

    --brand-1: #9333ea; --brand-2: #be185d; --brand-3: #c2410c;
    --brand-text-1: #c084fc; --brand-text-2: #f472b6; --brand-text-3: #fb923c; /* original identity gradient, used as text */
    --brand-soft: #2a2150;
    --shadow-brand: 0 6px 24px rgb(168 85 247 / 0.35);

    --rate-again: #fca5a5; --rate-again-soft: #3b1d2a;
    --rate-hard:  #fcd34d; --rate-hard-soft:  #382c1c;
    --rate-good:  #86efac; --rate-good-soft:  #16302a;
    --rate-easy:  #7dd3fc; --rate-easy-soft:  #142c44;

    --state-new: #7dd3fc;        --state-new-soft: #142c44;
    --state-learning: #fdba74;   --state-learning-soft: #3a2618;
    --state-relearning: #fca5a5; --state-relearning-soft: #3b1d2a;
    --state-review: #86efac;     --state-review-soft: #16302a;
    --state-young: #5eead4;      --state-young-soft: #123331;
    --state-suspended: #cbd5e1;  --state-suspended-soft: #2a3149;
    --state-leech: #fda4af;      --state-leech-soft: #3d1b2b;

    --success: #86efac; --success-soft: #16302a;
    --warn:    #fcd34d; --warn-soft:    #382c1c;
    --danger:  #fca5a5; --danger-soft:  #3b1d2a; --danger-solid: #b91c1c;
    --info:    #7dd3fc; --info-soft:    #142c44;
    --toast-action: #7e22ce;

    --chart-1: #c084fc; --chart-2: #f472b6;
    --heat-0: #1f2742; --heat-1: #3b2a5c; --heat-2: #6b3fa0; --heat-3: #a855f7; --heat-4: #e9d5ff;
    --heat-edge: rgb(255 255 255 / 0.08);

    --shadow-1: 0 1px 2px rgb(0 0 0 / 0.40);
    --shadow-2: 0 8px 24px rgb(0 0 0 / 0.45);
    --shadow-3: 0 24px 60px rgb(0 0 0 / 0.55);
}

/* Theme-independent tokens (§1.3) */
:root {
    /* Be Vietnam Pro carries the Vietnamese subset; Outfit is Latin-only (logo, English headword, numerals). */
    --font-ui: 'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-display: 'Outfit', var(--font-ui);
    --font-ipa: ui-sans-serif, system-ui, 'Segoe UI', 'Noto Sans', sans-serif;
    --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

    --fs-xs: 0.75rem; --fs-sm: 0.875rem; --fs-md: 1rem; --fs-lg: 1.125rem; --fs-xl: 1.25rem;
    --fs-2xl: 1.5rem; --fs-3xl: 1.875rem; --fs-4xl: 2.25rem;
    --fs-word: clamp(2rem, 1.5rem + 2vw, 2.75rem);

    --lh-tight: 1.2; --lh-heading: 1.35; --lh-body: 1.6;
    --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-black: 800;

    --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;

    --radius-xs: 6px; --radius-sm: 10px; --radius-md: 14px; --radius-lg: 20px; --radius-xl: 28px; --radius-full: 999px;

    --dur-instant: 80ms; --dur-fast: 150ms; --dur-base: 220ms; --dur-slow: 360ms; --dur-flip: 500ms;
    --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

    --sidebar-w: 248px; --rail-w: 76px; --topbar-h: 56px; --tabbar-h: 64px;
    --content-max: 1120px; --reading-max: 720px; --control-h: 40px; --control-h-sm: 32px; --control-h-lg: 48px;

    --z-sticky: 100; --z-dropdown: 200; --z-toast: 900; --z-confetti: 950; /* dialogs use native top layer */
}

/* Legacy alias block (§1.5) — TEMPORARY: lets pre-refresh CSS render in both themes.
   Removed in Phase 9 once every view uses the tokens above. Do not use these names in new CSS. */
:root, [data-theme="dark"] {
    --bg-primary: var(--surface-0); --bg-secondary: var(--surface-1); --bg-card: var(--surface-1);
    --bg-card-hover: var(--surface-2); --card-bg: var(--surface-1); --background-muted: var(--surface-2);
    --border-color: var(--border); --border-glow: var(--brand-soft);
    --text-primary: var(--text-1); --text-secondary: var(--text-2); --text-muted: var(--text-3);
    --accent-purple: var(--text-brand); --accent-pink: var(--brand-text-2); --accent-orange: var(--state-learning);
    --accent-teal: var(--state-young); --accent-green: var(--success); --accent-red: var(--danger); --accent-blue: var(--info);
    --color-primary: var(--text-brand); --gradient-accent: var(--gradient-brand);
    --gradient-card: linear-gradient(180deg, rgb(255 255 255 / 0.03) 0%, rgb(255 255 255 / 0) 100%);
    --font-body: var(--font-ui); --font-sans: var(--font-ui);
    --shadow-sm: var(--shadow-1); --shadow-md: var(--shadow-2); --shadow-lg: var(--shadow-3); --shadow-glow: var(--shadow-brand);
    --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-bounce: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@media (prefers-reduced-motion: reduce) {
    :root { --dur-fast: 1ms; --dur-base: 1ms; --dur-slow: 1ms; --dur-flip: 1ms; }
}