/* Quotly design tokens — single source of truth (panel + /ui) */

:root {
  /* Surfaces */
  --bg-0: #08070a;
  --bg-1: #0f0d13;
  --bg-2: #17141d;
  --bg-3: #211d2a;
  --border: #2a2533;
  --border-strong: #3b3447;

  /* Text */
  --text-0: #f4f0ea;
  --text-1: #b5adbf;
  --text-2: #7a7285;

  /* Accent (warm gold) */
  --accent: #e8b86a;
  --accent-hover: #f2cb8b;
  --accent-soft: rgba(232, 184, 106, 0.12);
  --accent-glow: 0 0 32px rgba(232, 184, 106, 0.22);

  /* Semantic */
  --success: #5fd3a0;
  --warning: #e8b86a;
  --danger: #f0627a;
  --info: #7fa6ff;

  /* Typography families */
  --font-display: "Fraunces", "Georgia", serif;
  --font-sans: "Inter", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  /* Type scale */
  --fs-quote-xl: clamp(1.75rem, 4vw, 2.75rem);
  --fs-quote: clamp(1.25rem, 2vw, 1.5rem);
  --fs-h1: clamp(1.5rem, 2.5vw, 2rem);
  --fs-h2: clamp(1.125rem, 1.5vw, 1.25rem);
  --fs-body: 0.9375rem;
  --fs-small: 0.8125rem;
  --fs-micro: 0.6875rem;

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

  /* Radius */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* Motion */
  --dur-instant: 80ms;
  --dur-fast: 140ms;
  --dur-base: 240ms;
  --dur-slow: 380ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Z-index */
  --z-base: 0;
  --z-sticky: 10;
  --z-dropdown: 20;
  --z-sheet: 30;
  --z-modal: 40;
  --z-toast: 50;

  /* Theme-derived alphas (overridden by applyTheme) */
  --primary-a06: rgba(232, 184, 106, 0.06);
  --primary-a07: rgba(232, 184, 106, 0.07);
  --primary-a10: rgba(232, 184, 106, 0.1);
  --primary-a12: rgba(232, 184, 106, 0.12);
  --primary-a25: rgba(232, 184, 106, 0.25);

  /* Legacy aliases (panel.html) — map to tokens */
  --background: var(--bg-0);
  --surface: var(--bg-1);
  --surface-2: var(--bg-2);
  --surface-3: var(--bg-3);
  --card: var(--bg-2);
  --line: var(--border);
  --line-hi: var(--border-strong);
  --text: var(--text-0);
  --dim: var(--text-2);
  --primary: var(--accent);
  --primary-hi: var(--accent-hover);
  --primary-lo: #b8924a;
  --primary-glow: rgba(232, 184, 106, 0.38);
  --green: var(--success);
  --green-bg: rgba(95, 211, 160, 0.1);
  --red: var(--danger);
  --red-bg: rgba(240, 98, 122, 0.1);
  --sans: var(--font-sans);
  --mono: var(--font-mono);
  --void: var(--bg-0);
  --void-1: var(--bg-1);
  --void-2: var(--bg-2);
  --void-3: var(--bg-3);
  --violet: var(--accent);
  --violet-hi: var(--accent-hover);
  --violet-lo: var(--primary-lo);
  --violet-glow: var(--primary-glow);
}