/* Design Tokens — dark-first, construction-grade · Design System 2.0 */
:root {
  /* Backgrounds — warm charcoal layers */
  --bg: #161819;
  --surface: #1d2021;
  --surface-2: #26292b;
  --surface-3: #303436;
  --border: #3d4244;
  --glass: rgba(29, 32, 33, 0.82);

  /* Text — high contrast hierarchy */
  --text: #ecedee;
  --text-secondary: #c0c4c8;
  --text-muted: #8c9196;
  --text-faint: #6e7479;

  /* Primary accent: Warm gold — refined, not neon */
  --accent: #c8964a;
  --accent-hover: #d4a45a;
  --accent-muted: rgba(200, 150, 74, 0.10);
  --accent-glow: rgba(200, 150, 74, 0.20);

  /* Secondary accent: muted blue */
  --accent-2: #7ba8d4;
  --accent-2-muted: rgba(123, 168, 212, 0.10);
  --accent-2-subtle: rgba(123, 168, 212, 0.05);

  /* Warm surface variants */
  --surface-warm: #1f1d1a;
  --border-warm: rgba(200, 150, 74, 0.12);
  --text-warm: #b8b0a0;
  --border-subtle: rgba(61, 66, 68, 0.3);
  --surface-hover: rgba(255, 255, 255, 0.03);

  /* Semantic — informational, not alarming */
  --success: #4aca8b;
  --success-bg: rgba(74, 202, 139, 0.10);
  --warning: #e09050;
  --warning-bg: rgba(224, 144, 80, 0.10);
  --danger: #d97272;
  --danger-hover: #c86060;
  --danger-bg: rgba(217, 114, 114, 0.10);

  /* Spacing — generous for readability */
  --space-2xs: 0.125rem;
  --space-xs: 0.375rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2.5rem;
  --space-2xl: 3.5rem;
  --space-3xl: 5rem;

  /* Typography */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono: "SF Mono", Monaco, "Cascadia Code", monospace;

  --text-2xs: 0.6875rem;
  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  --text-base: 0.9375rem;
  --text-lg: 1.0625rem;
  --text-xl: 1.25rem;
  --text-2xl: clamp(1.375rem, 1.1rem + 1.25vw, 1.625rem);
  --text-3xl: clamp(1.625rem, 1.35rem + 1.5vw, 2.125rem);
  --text-4xl: clamp(2.125rem, 1.6rem + 2vw, 2.75rem);

  /* Line heights */
  --leading-tight: 1.15;
  --leading-snug: 1.35;
  --leading-normal: 1.55;
  --leading-relaxed: 1.7;

  /* Font weights */
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  --font-extrabold: 800;

  /* Border radius — slightly larger for modern feel */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-full: 9999px;

  /* Shadows — feathered, subtle elevation */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.12);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 12px 24px rgba(0, 0, 0, 0.18), 0 4px 8px rgba(0, 0, 0, 0.08);
  --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.22), 0 8px 16px rgba(0, 0, 0, 0.10);
  --shadow-glow: none;
  --shadow-card: none;
  --shadow-card-hover: 0 4px 16px rgba(0, 0, 0, 0.15), 0 0 1px rgba(255, 255, 255, 0.04);
  --shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.15);
  --shadow-input: inset 0 1px 3px rgba(0, 0, 0, 0.12);

  /* Gradients */
  --gradient-surface: none;
  --gradient-accent-subtle: linear-gradient(135deg, rgba(200, 150, 74, 0.03) 0%, transparent 100%);

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms ease;

  /* Easing — spring-like curves for modern feel */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* Z-index scale */
  --z-base: 0;
  --z-dropdown: 50;
  --z-sticky: 100;
  --z-overlay: 200;
  --z-modal: 300;
  --z-toast: 400;

  /* Layout */
  --sidebar-width: 260px;
  --sidebar-collapsed: 72px;
  --nav-height: 64px;
}

/* ═══════════════════════════════════════
   Light theme overrides
   ═══════════════════════════════════════ */
[data-theme="light"] {
  --bg: #f8f9fa;
  --surface: #ffffff;
  --surface-2: #f3f4f6;
  --surface-3: #e5e7eb;
  --border: #e5e7eb;
  --glass: rgba(255, 255, 255, 0.85);

  --text: #1a1a2e;
  --text-secondary: #3d3d5c;
  --text-muted: #6b7280;
  --text-faint: #9ca3af;

  --accent: #7c3aed;
  --accent-hover: #6d28d9;
  --accent-muted: rgba(124, 58, 237, 0.08);
  --accent-glow: rgba(124, 58, 237, 0.12);

  --accent-2: #3b82f6;
  --accent-2-muted: rgba(59, 130, 246, 0.08);
  --accent-2-subtle: rgba(59, 130, 246, 0.04);

  --surface-warm: #f5f3ff;
  --border-warm: rgba(124, 58, 237, 0.15);
  --text-warm: #6b7280;
  --border-subtle: rgba(0, 0, 0, 0.04);
  --surface-hover: rgba(0, 0, 0, 0.02);

  --success: #22c55e;
  --success-bg: rgba(34, 197, 94, 0.10);
  --warning: #d4870f;
  --warning-bg: rgba(212, 135, 15, 0.10);
  --danger: #dc4444;
  --danger-hover: #c62626;
  --danger-bg: rgba(220, 68, 68, 0.08);

  /* Shadows: feather-light — let whitespace do the work */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.03);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.05);
  --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.06);
  --shadow-xl: 0 8px 24px rgba(0, 0, 0, 0.08);
  --shadow-glow: none;
  --shadow-card: none;
  --shadow-card-hover: 0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-inset: none;
  --shadow-input: none;

  --gradient-surface: none;
  --gradient-accent-subtle: none;
}