:root {
  color-scheme: light;

  --bg-primary: #f5f1ea;
  --bg-secondary: #ece7de;
  --surface-primary: #fffdfa;
  --surface-secondary: #f7f3ec;
  --surface-tertiary: #efebe3;
  --surface-glass: #fffdfa;
  --surface-strong: #f9f5ee;

  --accent-primary: #2f343b;
  --accent-secondary: #575e68;
  --accent-tertiary: #8a6e4f;
  --warning: #c58a2d;
  --error: #c45746;
  --success: #4f8a5d;

  --text-primary: #221f1a;
  --text-secondary: #5f625f;
  --text-tertiary: #83807a;
  --text-inverse: #fffaf2;

  --border-subtle: rgba(35, 38, 42, 0.1);
  --border-strong: rgba(35, 38, 42, 0.16);
  --border-accent: rgba(47, 52, 59, 0.24);
  --shadow-panel: 0 10px 24px rgba(34, 31, 26, 0.05);
  --shadow-elevated: 0 14px 32px rgba(34, 31, 26, 0.07);
  --shadow-glow: none;
  --shadow-stage: 0 24px 60px rgba(25, 22, 17, 0.12);
  --shadow-hero: 0 30px 70px rgba(25, 22, 17, 0.14);

  --aurora-gradient: linear-gradient(135deg, #2f343b 0%, #575e68 100%);
  --hero-gradient: linear-gradient(180deg, #fffdfa, #f7f3ec);
  --panel-hero-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 243, 236, 0.94));
  --panel-stage-gradient: radial-gradient(circle at top, rgba(47, 52, 59, 0.1), transparent 34%), linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(241, 236, 228, 0.96));
  --panel-utility-gradient: linear-gradient(180deg, rgba(246, 241, 233, 0.96), rgba(242, 236, 227, 0.94));
  --edge-highlight: linear-gradient(90deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0));
  --energy-sweep: linear-gradient(120deg, rgba(255, 255, 255, 0) 18%, rgba(255, 255, 255, 0.42) 46%, rgba(255, 255, 255, 0) 74%);

  --font-sans: "Instrument Sans", "Inter", "Segoe UI", sans-serif;
  --font-body: "Inter", "Instrument Sans", "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", "JetBrains Mono", "Cascadia Code", monospace;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 36px;
  --space-8: 52px;
  --space-9: 72px;
  --space-10: 96px;

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  --shell-max: 1440px;
  --content-gap: var(--space-6);
  --gap-section: var(--space-9);
  --gap-zone: var(--space-8);
  --gap-panel: var(--space-6);
  --gap-utility: var(--space-2);
  --zone-gap-lg: var(--space-9);
  --zone-gap-md: var(--space-8);
  --zone-gap-sm: var(--space-4);
  --pad-hero: var(--space-8);
  --pad-stage: var(--space-7);
  --pad-standard: var(--space-6);
  --pad-utility: var(--space-4);
  --pad-dock: var(--space-5);
  --transition-base: 220ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 420ms cubic-bezier(0.22, 1, 0.36, 1);
  --motion-fast: 160ms;
  --motion-base: 260ms;
  --motion-slow: 420ms;
  --motion-dramatic: 720ms;
  --motion-page-exit: 180ms;
  --motion-page-shutter: 720ms;
  --motion-page-enter: 520ms;
  --motion-page-analyze: 820ms;
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-emphasized: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-entrance: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-exit: cubic-bezier(0.4, 0, 1, 1);
  --ease-spring-soft: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-spring-bold: cubic-bezier(0.16, 1, 0.3, 1.18);
  --ease-shutter-sweep: cubic-bezier(0.2, 0.86, 0.16, 1);
  --ease-scene-collapse: cubic-bezier(0.32, 0, 0.1, 1);
  --ease-scene-arrival: cubic-bezier(0.18, 1, 0.3, 1);
}

body[data-theme="slate"] {
  color-scheme: dark;
  --bg-primary: #10161d;
  --bg-secondary: #161e27;
  --surface-primary: #17212b;
  --surface-secondary: #1d2832;
  --surface-tertiary: #24313d;
  --surface-glass: #17212b;
  --surface-strong: #1d2832;
  --text-primary: #f2efe9;
  --text-secondary: #b3bcc8;
  --text-tertiary: #91a0b1;
  --text-inverse: #091018;
  --border-subtle: rgba(226, 232, 240, 0.1);
  --border-strong: rgba(226, 232, 240, 0.16);
  --border-accent: rgba(89, 147, 255, 0.3);
  --shadow-panel: 0 14px 32px rgba(0, 0, 0, 0.24);
  --shadow-elevated: 0 18px 40px rgba(0, 0, 0, 0.28);
  --shadow-stage: 0 26px 60px rgba(0, 0, 0, 0.34);
  --shadow-hero: 0 34px 72px rgba(0, 0, 0, 0.36);
  --shadow-glow: 0 22px 44px rgba(7, 11, 16, 0.42);
  --hero-gradient: #1d2832;
  --panel-hero-gradient: #1d2832;
  --panel-stage-gradient: #131b24;
  --panel-utility-gradient: #101720;
  --edge-highlight: linear-gradient(90deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0));
  --energy-sweep: linear-gradient(120deg, rgba(255, 255, 255, 0) 18%, rgba(255, 255, 255, 0.18) 46%, rgba(255, 255, 255, 0) 74%);
}

body[data-theme="contrast"] {
  color-scheme: light;
  --bg-primary: #f2eee6;
  --bg-secondary: #e7e0d2;
  --surface-primary: #fffefb;
  --surface-secondary: #f4efe5;
  --surface-tertiary: #ebe3d2;
  --surface-glass: #fffefb;
  --surface-strong: #f8f2e8;
  --text-primary: #15120d;
  --text-secondary: #49453d;
  --text-tertiary: #686256;
  --border-subtle: rgba(21, 18, 13, 0.12);
  --border-strong: rgba(21, 18, 13, 0.18);
}

body[data-accent="graphite"] {
  --accent-primary: #2f343b;
  --accent-secondary: #575e68;
  --border-accent: rgba(47, 52, 59, 0.24);
  --aurora-gradient: linear-gradient(135deg, #2f343b 0%, #575e68 100%);
}

body[data-accent="blue"] {
  --accent-primary: #2f5ed3;
  --accent-secondary: #2b8e88;
  --border-accent: rgba(47, 94, 211, 0.24);
  --aurora-gradient: linear-gradient(135deg, #2f5ed3 0%, #2b8e88 100%);
}

body[data-accent="teal"] {
  --accent-primary: #187d77;
  --accent-secondary: #2f5ed3;
  --border-accent: rgba(24, 125, 119, 0.24);
  --aurora-gradient: linear-gradient(135deg, #187d77 0%, #2f5ed3 100%);
}

body[data-accent="bronze"] {
  --accent-primary: #9b6a33;
  --accent-secondary: #7c8c4a;
  --border-accent: rgba(155, 106, 51, 0.24);
  --aurora-gradient: linear-gradient(135deg, #9b6a33 0%, #7c8c4a 100%);
}

body[data-density="compact"] {
  --space-3: 10px;
  --space-4: 14px;
  --space-5: 18px;
  --space-6: 20px;
  --content-gap: var(--space-5);
  --radius-md: 14px;
}

body[data-motion="reduced"] * {
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}