/* tokens.css - design tokens (CSS custom properties) only.
   LOCKED & machine-checked by scripts/design-lock-check.js.
   Never edit a locked value; add a NEW [data-theme] block for a new look.
   Loaded FIRST (before style.css) on every page. */

:root {
  --ink: #121826;
  --muted: #5f6678;
  --paper: #f4f6fb;
  --paper-alt: #e9edf5;
  --card: rgba(255, 255, 255, 0.72);
  --card-solid: #ffffff;
  --line: rgba(18, 24, 38, 0.1);
  --line-strong: rgba(18, 24, 38, 0.14);
  --indigo: #5a67f2;
  --indigo-deep: #424ccf;
  --indigo-soft: rgba(90, 103, 242, 0.12);
  --amber: #d98a11;
  --amber-soft: rgba(217, 138, 17, 0.12);
  --danger: #ef4444;
  --success: #10b981;
  --success-ink: #166534;
  --danger-surface: #fef2f2;
  --success-surface: #ecfdf5;
  --danger-line-soft: #fecaca;
  --footer-ink-soft: #cdd0db;
  --footer-ink-muted: #9aa0b4;
  --inverse-ink: #ffffff;
  --overlay-white-12: rgba(255, 255, 255, 0.12);
  --overlay-white-16: rgba(255, 255, 255, 0.16);
  --overlay-white-20: rgba(255, 255, 255, 0.2);
  --overlay-white-24: rgba(255, 255, 255, 0.24);
  --overlay-white-30: rgba(255, 255, 255, 0.3);
  --overlay-white-35: rgba(255, 255, 255, 0.35);
  --overlay-white-42: rgba(255, 255, 255, 0.42);
  --overlay-white-78: rgba(255, 255, 255, 0.78);
  --overlay-white-84: rgba(255, 255, 255, 0.84);
  --overlay-white-90: rgba(255, 255, 255, 0.9);
  --overlay-white-92: rgba(255, 255, 255, 0.92);
  --overlay-white-85: rgba(255, 255, 255, 0.85);
  --overlay-white-60: rgba(255, 255, 255, 0.6);
  --review-hard: #d97706;
  --review-hard-line: #f59e0b;
  --purple: var(--indigo);
  --purple-dark: #4450d9;
  --purple-deeper: #27327f;
  --text: var(--ink);
  --text-muted: var(--muted);
  --border: var(--line);
  --bg-surface: var(--paper);
  --white: var(--card);
  --white-solid: var(--card-solid);
  --shadow-soft: 0 18px 50px rgba(16, 24, 40, 0.08);
  --shadow-medium: 0 24px 70px rgba(16, 24, 40, 0.12);
  --blur: blur(18px);

  /* ── Motion (shared, theme-independent) ──
     Premium liquid-glass interaction timing. Expo-out is the "silky" curve;
     the longer settle reads smoother than a stock 0.2s ease, and the short
     press feels physical. NEW tokens - not part of the locked color contract. */
  --lg-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --lg-ease-spring: cubic-bezier(0.34, 1.4, 0.5, 1);
  --lg-dur: 0.36s;
  --lg-dur-press: 0.1s;
}

[data-theme="dark"] {
  /* Ink & Brass — warm dark academia palette.
     Near-black ink base, warm parchment text, antique-brass accent. */
  --ink: #ece6d6;          /* warm parchment text */
  --muted: #9b9486;        /* faded ink / taupe-grey */
  --paper: #181714;        /* near-black warm ink — page base (dimmed 6%) */
  --paper-alt: #131210;    /* deeper warm ink — sidebar / header */
  --card: rgba(33, 31, 27, 0.72);
  --card-solid: #211f1b;   /* warm raised slate */
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.14);
  --indigo: #c9a35c;       /* antique brass — primary accent */
  --indigo-deep: #a8823f;  /* deep brass / bronze */
  --indigo-soft: rgba(201, 163, 92, 0.14);
  --amber: #e2b25a;        /* candle amber — highlight */
  --amber-soft: rgba(226, 178, 90, 0.14);
  --danger: #d98a78;       /* clay rose */
  --success: #9dbe93;      /* muted sage / reading-lamp green */
  --success-ink: #9dbe93;
  --danger-surface: rgba(217, 138, 120, 0.12);
  --success-surface: rgba(157, 190, 147, 0.12);
  --purple: var(--indigo);
  --purple-dark: #d8b878;  /* pale gilt — secondary accent */
  --purple-deeper: #7a5f33;
  --text: var(--ink);
  --text-muted: var(--muted);
  --border: var(--line);
  --bg-surface: var(--paper);
  --white: var(--card);
  --white-solid: var(--card-solid);
  --shadow-soft: 0 22px 56px rgba(0, 0, 0, 0.45);
  --shadow-medium: 0 28px 80px rgba(0, 0, 0, 0.55);
  --blur: blur(18px);
}

/* ── Theme v2: "Sunset" - warm light theme. Exact palette: ──
   coral #FF9A86 · peach #FFB399 · apricot #FFD6A6 · pale-yellow #FFF0BE.
   Locked & enforced via scripts/design-lock-check.js. Do not edit values;
   add a new [data-theme] block for any new look. */
[data-theme="sunset"] {
  --ink: #5a3328;
  --muted: #a06b56;
  --paper: #fff0be;
  --paper-alt: #ffd6a6;
  --card: rgba(255, 250, 235, 0.72);
  --card-solid: #fff7e6;
  --line: rgba(150, 80, 50, 0.16);
  --line-strong: rgba(150, 80, 50, 0.24);
  --indigo: #e8674a;
  --indigo-deep: #c64f33;
  --indigo-soft: rgba(255, 154, 134, 0.22);
  --amber: #d98a11;
  --amber-soft: rgba(217, 138, 17, 0.14);
  --danger: #e0483f;
  --success: #4e9d6b;
  --success-ink: #2f6b46;
  --danger-surface: rgba(224, 72, 63, 0.12);
  --success-surface: rgba(78, 157, 107, 0.14);
  --purple: var(--indigo);
  --purple-dark: #d98a11;
  --purple-deeper: #c64f33;
  --text: var(--ink);
  --text-muted: var(--muted);
  --border: var(--line);
  --bg-surface: var(--paper);
  --white: var(--card);
  --white-solid: var(--card-solid);
  --inverse-ink: #ffffff;
  --shadow-soft: 0 18px 50px rgba(150, 70, 40, 0.14);
  --shadow-medium: 0 24px 70px rgba(150, 70, 40, 0.18);
  --blur: blur(18px);
}

/* ── "Breeze" — the second glass flavour, a cool counterpart to the warm
   "Ink" glass. Selected via Glass → Breeze in the theme picker; rendered
   with the .theme-glass frosted layer (like Ink). Locked & enforced via
   scripts/design-lock-check.js. */
[data-theme="breeze"] {
  --ink: #cdd6f4;
  --muted: #7f849c;
  --paper: #1e1e2e;
  --paper-alt: #181825;
  --card: rgba(49, 50, 68, 0.75);
  --card-solid: #313244;
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.14);
  --indigo: #b4befe;
  --indigo-deep: #7287fd;
  --indigo-soft: rgba(180, 190, 254, 0.14);
  --amber: #f9e2af;
  --amber-soft: rgba(249, 226, 175, 0.14);
  --danger: #f38ba8;
  --success: #a6e3a1;
  --success-ink: #a6e3a1;
  --danger-surface: rgba(243, 139, 168, 0.12);
  --success-surface: rgba(166, 227, 161, 0.12);
  --purple: var(--indigo);
  --purple-dark: #cba6f7;
  --purple-deeper: #6e5ea5;
  --text: var(--ink);
  --text-muted: var(--muted);
  --border: var(--line);
  --bg-surface: var(--paper);
  --white: var(--card);
  --white-solid: var(--card-solid);
  --inverse-ink: #ffffff;
  --shadow-soft: 0 22px 56px rgba(0, 0, 0, 0.45);
  --shadow-medium: 0 28px 80px rgba(0, 0, 0, 0.55);
  --blur: blur(18px);
}