/* Design tokens (task.md section 9.2).
   One place for colour, type and spacing. Both themes are defined here. */

:root {
  color-scheme: light;

  /* --- palette: light --- */
  --paper: #f4f0fa;
  --surface: #ffffff;
  --ink: #2b1d45;
  --muted: #70607f;
  --violet: #6b3fe0;
  --violet-deep: #4b27b5;
  --gold: #f5b83d;
  --gold-deep: #c98a12;
  --rose: #e8578a;
  --rose-deep: #c22e63;
  --lock: #d9d0e8;
  --lock-ink: #5e4f72;

  /* derived */
  --accent-soft: color-mix(in srgb, var(--violet) 12%, var(--surface));
  --gold-soft: color-mix(in srgb, var(--gold) 22%, var(--surface));
  --rose-soft: color-mix(in srgb, var(--rose) 14%, var(--surface));
  --shadow-sm: 0 1px 2px rgb(43 29 69 / 8%);
  --shadow-md: 0 6px 18px rgb(43 29 69 / 12%);
  --shadow-lg: 0 -10px 32px rgb(43 29 69 / 18%);

  /* --- typography --- */
  --font-display: "Unbounded", "Nunito", system-ui, sans-serif;
  --font-text: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;

  --text-xs: 0.8125rem; /* 13 */
  --text-sm: 1rem; /* 16 */
  --text-md: 1.1875rem; /* 19 */
  --text-lg: 1.5rem; /* 24 */
  --text-xl: 2rem; /* 32 */

  --leading-tight: 1.2;
  --leading-text: 1.5;

  /* --- spacing --- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  /* --- layout --- */
  --content-max: 520px;
  --node-radius: 30px;
  --node-edge: 6px;
  --focus-ring: 3px solid var(--violet);
  --tap: 44px;

  /* --- motion --- */
  --dur-fast: 160ms;
  --dur-base: 280ms;
  --dur-slow: 1200ms;
  --ease-out: cubic-bezier(0.22, 0.9, 0.3, 1);
  --ease-back: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Dark theme follows the system and can be forced with data-theme on <html>.
   The two blocks below are deliberately identical; keep them in sync. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --paper: #17102a;
    --surface: #241a3b;
    --ink: #f1eafb;
    --muted: #b3a5c9;
    --violet: #a98cff;
    --violet-deep: #5b2fd0;
    --gold: #ffcb5c;
    --gold-deep: #b8770a;
    --rose: #ff7aa8;
    --rose-deep: #d94a80;
    --lock: #3b2f57;
    --lock-ink: #b0a2c9;

    --shadow-sm: 0 1px 2px rgb(0 0 0 / 40%);
    --shadow-md: 0 6px 18px rgb(0 0 0 / 45%);
    --shadow-lg: 0 -10px 32px rgb(0 0 0 / 55%);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --paper: #17102a;
  --surface: #241a3b;
  --ink: #f1eafb;
  --muted: #b3a5c9;
  --violet: #a98cff;
  --violet-deep: #5b2fd0;
  --gold: #ffcb5c;
  --gold-deep: #b8770a;
  --rose: #ff7aa8;
  --rose-deep: #d94a80;
  --lock: #3b2f57;
  --lock-ink: #b0a2c9;

  --shadow-sm: 0 1px 2px rgb(0 0 0 / 40%);
  --shadow-md: 0 6px 18px rgb(0 0 0 / 45%);
  --shadow-lg: 0 -10px 32px rgb(0 0 0 / 55%);
}

/* Solid fills that carry a white label. They are deliberately theme
   independent: --violet and --rose lighten for dark surfaces, which would put
   white text on a pale background. The theme blocks above never touch these. */
:root {
  --btn-bg: #6b3fe0; /* white label: 6.1:1 */
  --alert-bg: #b8295c; /* white label: 6.0:1 */
}