/* ========================================
   Design Tokens — Lunati
   Single source of truth for all visual values
   ======================================== */

:root {
  /* ── Color Primitives ── */
  --amber-50: #fdf8e8;
  --amber-100: #f5ecc8;
  --amber-200: #e0c27b;
  --amber-300: #d7b46a;
  --amber-400: #cda756;
  --amber-500: #b8904f;
  --amber-600: #806128;
  --amber-700: #5c4a1e;
  --amber-800: #3a2e12;
  --amber-900: #1a1408;

  --violet-50: #f5f3ff;
  --violet-100: #ede9fe;
  --violet-200: #c4b5fd;
  --violet-300: #a78bfa;
  --violet-400: #8b5cf6;
  --violet-500: #7c3aed;
  --violet-600: #6d28d9;
  --violet-700: #5b21b6;
  --violet-800: #4c1d95;
  --violet-900: #2e1065;

  --cyan-400: #22d3ee;
  --cyan-500: #06b6d4;
  --pink-400: #f472b6;
  --pink-500: #ec4899;
  --green-400: #34d399;
  --green-500: #10b981;
  --red-400: #f87171;
  --red-500: #ef4444;
  --orange-400: #fb923c;
  --orange-500: #f59e0b;

  /* ── Semantic Colors (Dark default) ── */
  --bg-base: #09090b;
  --bg-surface: #111219;
  --bg-elevated: #18181b;
  --bg-overlay: rgba(17, 18, 25, 0.85);
  --bg-cards: #1a1b23;

  --text-primary: #fafafa;
  --text-secondary: #b9b2a7;
  --text-tertiary: #8f887e;
  --text-disabled: #6f6f88;

  --border-subtle: rgba(255, 255, 255, 0.05);
  --border-default: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.15);

  --accent: var(--amber-300);
  --accent-hover: var(--amber-200);
  --accent-muted: rgba(215, 180, 106, 0.15);
  --accent-glow: rgba(215, 180, 106, 0.25);

/* ── 向后兼容别名：旧令牌名 → 新语义令牌 ──
     features.css 中仍在使用历史命名，改完可逐条删除 */
  --bg: var(--bg-base);
  --bg2: var(--bg-surface);
  --bg3: var(--bg-elevated);
  --bg4: var(--bg-cards);
  --text: var(--text-primary);
  --text2: var(--text-secondary);
  --text3: var(--text-tertiary);
  --border: var(--border-subtle);
  --border2: var(--border-default);
  --border3: var(--border-strong);
  --glass: var(--bg-overlay);
  --accent2: var(--amber-400);
  --accent3: var(--amber-200);
  --glow: var(--accent-glow);
  --glow-strong: var(--accent-glow);
  --gold: var(--amber-300);
  --paper: #efe4cf;
  --ink: #d9d2c4;
  --cyan: #7aa2c7;
  --pink: #b47892;
  --success: var(--green-500);
  --warning: var(--orange-500);
  --danger: var(--red-500);
  --info: #3b82f6;
  --radius-xs: 8px;
  --nav-h: var(--nav-height);
  --ease: var(--ease-in-out);
  --glass2: var(--bg-overlay);
  --muted: var(--text-disabled);
  --red: var(--red-500);
  --green: var(--green-500);
  --orange: var(--orange-500);

  /* ── Spacing Scale ── */
  --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;

  /* 介于刻度之间的常用值 */
  --space-7: 28px;

  /* ── Typography ── */
  --font-sans: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-serif: 'Noto Serif SC', Georgia, serif;
  --font-display: 'Orbitron', sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', monospace;

  --text-xs: 0.6875rem;
  --text-sm: 0.75rem;
  --text-base: 0.875rem;
  --text-md: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.5rem;
  --text-2xl: 2rem;
  --text-3xl: 3rem;
  --text-4xl: 4rem;
  --text-hero: clamp(3.1rem, 8vw, 6.4rem);

  --leading-tight: 1.1;
  --leading-snug: 1.3;
  --leading-base: 1.6;
  --leading-relaxed: 1.8;
  --leading-loose: 2;

  /* ── Radius ── */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 28px;
  --radius-full: 9999px;

  /* ── Shadows ── */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 8px 30px rgba(0, 0, 0, 0.12);
  --shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.18);
  --shadow-glow: 0 0 20px var(--accent-glow);
  --shadow-card: 0 4px 15px rgba(0, 0, 0, 0.08);
  --shadow-card-hover: 0 20px 45px rgba(0, 0, 0, 0.22);

  /* ── Transitions ── */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --duration-fast: 0.15s;
  --duration-normal: 0.3s;
  --duration-slow: 0.5s;

  /* ── Layout ── */
  --nav-height: 60px;
  --content-max: 1180px;
  --content-narrow: 960px;
  --content-reading: 680px;

  /* ── Z-index Scale ── */
  --z-base: 0;
  --z-dropdown: 100;
  --z-sticky: 500;
  --z-overlay: 800;
  --z-modal: 3000;
  --z-max: 2147483647;
}

/* ── Light Theme Override ── */
[data-theme="light"] {
  --bg-base: #fafafa;
  --bg-surface: #ffffff;
  --bg-elevated: #f4f4f5;
  --bg-overlay: rgba(255, 255, 255, 0.88);
  --bg-cards: #ffffff;

  --text-primary: #18181b;
  --text-secondary: #52525b;
  --text-tertiary: #a1a1aa;
  --text-disabled: #a1a1aa;

  --border-subtle: rgba(0, 0, 0, 0.04);
  --border-default: rgba(0, 0, 0, 0.08);
  --border-strong: rgba(0, 0, 0, 0.15);

  --accent: var(--amber-500);
  --accent-hover: var(--amber-600);
  --accent-muted: rgba(120, 92, 42, 0.08);
  --accent-glow: rgba(120, 92, 42, 0.12);

  --shadow-sm: 0 2px 8px rgba(116, 88, 42, 0.04);
  --shadow-md: 0 8px 30px rgba(116, 88, 42, 0.06);
  --shadow-lg: 0 20px 50px rgba(116, 88, 42, 0.08);
  --shadow-glow: 0 0 20px rgba(120, 92, 42, 0.08);
  --shadow-card: 0 4px 15px rgba(116, 88, 42, 0.04);
  --shadow-card-hover: 0 20px 45px rgba(116, 88, 42, 0.1);

  /* 亮色下的别名修正 */
  --accent2: var(--amber-600);
  --glow: var(--accent-glow);
  --glow-strong: var(--accent-glow);
  --paper: #3a2e12;
  --ink: #4b4032;
  --glass: var(--bg-overlay);
}