/* Design tokens — light :root; dark via html[data-theme="dark"] */
:root {
  --brand: #880092;
  --brand-hover: #6f0076;
  --brand-tint: rgba(136, 0, 146, 0.15);
  --brand-2: #70c32b;
  --brand-2-hover: #5aa01f;
  --brand-2-tint: rgba(112, 195, 43, 0.18);

  --gold: #c9a86a;
  --gold-hover: #d2b47b;
  --gold-faint: rgba(201, 168, 106, 0.2);

  --bg: #f9fafb;
  --surface: #ffffff;
  --surface-muted: #f3f4f6;
  --text: #111827;
  --muted: #4b5563;
  --muted2: #6b7280;
  --line: rgba(17, 24, 39, 0.1);
  --line-soft: rgba(17, 24, 39, 0.06);

  --radius-sm: 10px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05);
  --shadow-md: 0 12px 32px rgba(15, 23, 42, 0.1);
  --shadow-lg: 0 22px 50px rgba(15, 23, 42, 0.13);
  --inset-light: inset 0 1px 0 rgba(255, 255, 255, 0.65);

  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --t: 0.25s;
  --t-quick: 0.15s;

  --focus: rgba(136, 0, 146, 0.35);

  --t-bg: var(--bg);
  --t-surface: var(--surface);
  --t-surface-2: var(--surface-muted);
  --t-border: var(--line);
  --t-border-soft: var(--line-soft);
  --t-text: var(--text);
  --t-muted: var(--muted);
  --t-muted-2: var(--muted2);
  --t-accent: var(--brand);
  --t-focus: var(--focus);
}

html[data-theme="dark"] {
  --bg: #07080a;
  --surface: rgba(255, 255, 255, 0.055);
  --surface-muted: rgba(255, 255, 255, 0.035);
  --text: rgba(255, 255, 255, 0.92);
  --muted: rgba(255, 255, 255, 0.7);
  --muted2: rgba(255, 255, 255, 0.55);
  --line: rgba(255, 255, 255, 0.085);
  --line-soft: rgba(255, 255, 255, 0.06);

  --shadow-sm: 0 1px 0 rgba(255, 255, 255, 0.04);
  --shadow-md: 0 20px 56px rgba(0, 0, 0, 0.42);
  --shadow-lg: 0 28px 72px rgba(0, 0, 0, 0.5);
  --inset-light: inset 0 1px 0 rgba(255, 255, 255, 0.06);

  --t-accent: var(--gold);
  --t-focus: rgba(201, 168, 106, 0.4);
}