/* Design Tokens & CSS Custom Properties */

:root {
  /* Colors — Light Theme */
  --color-amber: #F5A623;
  --color-amber-dark: #D4870A;
  --color-amber-light: rgba(245, 166, 35, 0.12);
  --color-sage: #6B806B;
  --color-sage-dark: #4A5E4A;
  --color-navy: #1A1A2E;
  --color-navy-mid: #2D2D4A;
  --color-blue: #4A90D9;
  --color-teal: #41C4AA;
  --color-red: #DE5151;
  --color-green: #22C55E;

  /* Surfaces — Light Theme */
  --bg: #FAFAF5;
  --bg-features: linear-gradient(135deg, #eef2ee 0%, #f5f5ef 100%);
  --surface: rgba(255, 255, 255, 0.65);
  --surface-nav: rgba(250, 250, 245, 0.82);
  --surface-mob: rgba(250, 250, 245, 0.97);
  --text: #1A1A2E;
  --text-muted: #6B7280;
  --border: rgba(255, 255, 255, 0.5);
  --border-sub: rgba(107, 128, 107, 0.15);
  --card-hover-border: rgba(107, 128, 107, 0.3);

  /* Shadows — Light Theme */
  --shadow: 0 4px 24px rgba(26, 26, 46, 0.07);
  --shadow-lg: 0 16px 56px rgba(26, 26, 46, 0.13);
  --frame-shadow: 0 32px 80px rgba(0, 0, 0, 0.18);

  /* Gradients */
  --hero-bg: radial-gradient(ellipse at 70% 30%, rgba(245, 166, 35, 0.12) 0%, transparent 55%),
    radial-gradient(ellipse at 20% 80%, rgba(107, 128, 107, 0.07) 0%, transparent 50%), #FAFAF5;

  /* UI Elements — Light Theme */
  --badge-float-bg: rgba(255, 255, 255, 0.8);
  --badge-float-border: rgba(255, 255, 255, 0.55);
  --screenshot-bg: #FAFAF5;
  --ss-label: #6B7280;
  --theme-pill-bg: rgba(107, 128, 107, 0.1);
  --theme-pill-border: rgba(107, 128, 107, 0.2);
  --theme-btn-active-bg: white;
  --theme-btn-active-color: #4A5E4A;
  --frame-border: rgba(0, 0, 0, 0.12);

  /* Layout */
  --max-width: 1100px;
  --radius-card: 18px;
}

/* Dark Theme */
[data-theme="dark"] {
  --bg: #0E0E16;
  --bg-features: linear-gradient(135deg, #111A11 0%, #131318 100%);
  --surface: rgba(255, 255, 255, 0.05);
  --surface-nav: rgba(10, 10, 18, 0.88);
  --surface-mob: rgba(10, 10, 18, 0.97);
  --text: #EFEFEF;
  --text-muted: #9CA3AF;
  --border: rgba(255, 255, 255, 0.09);
  --border-sub: rgba(255, 255, 255, 0.07);
  --card-hover-border: rgba(107, 128, 107, 0.35);
  --shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 16px 56px rgba(0, 0, 0, 0.55);
  --hero-bg: radial-gradient(ellipse at 70% 30%, rgba(245, 166, 35, 0.09) 0%, transparent 55%),
    radial-gradient(ellipse at 20% 80%, rgba(107, 128, 107, 0.06) 0%, transparent 50%), #0E0E16;
  --badge-float-bg: rgba(20, 20, 32, 0.85);
  --badge-float-border: rgba(255, 255, 255, 0.1);
  --screenshot-bg: #0E0E16;
  --ss-label: #9CA3AF;
  --theme-pill-bg: rgba(255, 255, 255, 0.06);
  --theme-pill-border: rgba(255, 255, 255, 0.1);
  --theme-btn-active-bg: rgba(255, 255, 255, 0.12);
  --theme-btn-active-color: #EFEFEF;
  --color-amber-light: rgba(245, 166, 35, 0.1);
  --frame-border: rgba(255, 255, 255, 0.14);
  --frame-shadow: 0 32px 80px rgba(0, 0, 0, 0.42);
}