:root,
:root[data-theme="dark"] {
  color-scheme: dark;

  /* Surfaces: Pure Studio Obsidian & Architectural Graphite (Zero Green) */
  --bg: #090a0f;
  --sidebar: #0d0f16;
  --surface: #131722;
  --surface-hover: #1b2030;
  --surface-soft: #0f121b;
  --surface-elevated: #181d2b;
  --surface-glass: rgba(13, 15, 22, 0.82);

  /* Ink & Hierarchy */
  --text: #f6f5f1;
  --text-secondary: #cfd4e0;
  --muted: #929bb0;

  /* Borders & Hairlines */
  --border: rgba(255, 255, 255, 0.085);
  --border-strong: rgba(255, 255, 255, 0.16);

  /* Brand Accents: Morning-Star Gold & Royal Sapphire (from Official Emblem) */
  --accent: #e5b454;
  --accent-hover: #f1c46d;
  --accent-ink: #141007;
  --accent-soft: rgba(229, 180, 84, 0.14);
  --accent-border: rgba(229, 180, 84, 0.34);

  --gold: #e5b454;
  --gold-soft: rgba(229, 180, 84, 0.14);
  --royal: #173d7a;
  --royal-bright: #3b76d4;
  --royal-soft: rgba(34, 86, 170, 0.22);

  /* Semantic States */
  --error: #ff8a80;
  --error-bg: rgba(255, 138, 128, 0.1);
  --success: #7ce3b3;
  --success-bg: rgba(124, 227, 179, 0.1);
  --focus: #e5b454;

  /* Hero & Elevation */
  --hero-bg: radial-gradient(110% 120% at 82% 18%, rgba(30, 74, 150, 0.42) 0%, rgba(16, 22, 38, 0.88) 52%, #0c0f18 100%);
  --hero-glow: radial-gradient(circle at 76% 42%, rgba(229, 180, 84, 0.22) 0%, rgba(23, 61, 122, 0.18) 42%, transparent 72%);
  --hero-scrim: linear-gradient(92deg, #0b0e17 8%, rgba(11, 14, 23, 0.88) 48%, rgba(11, 14, 23, 0.12) 86%);
  --hero-text: #f7f6f2;
  --hero-subtext: #c9d0df;
  --hero-border: rgba(255, 255, 255, 0.1);

  --shadow-sm: 0 10px 28px -12px rgba(0, 0, 0, 0.55);
  --shadow-md: 0 18px 44px -14px rgba(0, 0, 0, 0.65);
  --shadow-lg: 0 28px 72px -18px rgba(0, 0, 0, 0.78);

  /* Geometry & Rhythm */
  --radius-lg: 28px;
  --radius: 22px;
  --radius-sm: 14px;
  --pill: 999px;

  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 48px;
  --space-6: 72px;

  --sidebar-width: 268px;
  --control-height: 50px;

  /* Typography: Wix Madefor Text for interface, Literata for quotations */
  --font: 'Wix Madefor Text', Arial, sans-serif;
  --font-serif: 'Literata', Georgia, serif;
  --body: 17.5px;
  --small: 16px;
  --h1: clamp(38px, 4.2vw, 66px);
  --h2: clamp(28px, 2.7vw, 40px);
  --h3: clamp(20px, 1.5vw, 23px);
  --transition: 200ms cubic-bezier(0.22, 1, 0.36, 1);
}

:root[data-theme="light"] {
  color-scheme: light;

  /* Surfaces: Warm Editorial Alabaster & Pure Crisp Paper (Zero Green) */
  --bg: #f8f6f1;
  --sidebar: #f1ede4;
  --surface: #ffffff;
  --surface-hover: #f4efe6;
  --surface-soft: #efeae0;
  --surface-elevated: #ffffff;
  --surface-glass: rgba(248, 246, 241, 0.86);

  /* Ink & Hierarchy */
  --text: #111622;
  --text-secondary: #2c3446;
  --muted: #5a6376;

  /* Borders & Hairlines */
  --border: #e4dfd3;
  --border-strong: #cfc7b6;

  /* Brand Accents: Deep Royal Sapphire CTA + Burnished Gold Highlights */
  --accent: #143b78;
  --accent-hover: #1b4d9b;
  --accent-ink: #ffffff;
  --accent-soft: rgba(20, 59, 120, 0.085);
  --accent-border: rgba(20, 59, 120, 0.24);

  --gold: #a9700f;
  --gold-soft: rgba(181, 123, 20, 0.12);
  --royal: #143b78;
  --royal-bright: #1b4d9b;
  --royal-soft: rgba(20, 59, 120, 0.09);

  /* Semantic States */
  --error: #b82e26;
  --error-bg: rgba(184, 46, 38, 0.07);
  --success: #1b6e46;
  --success-bg: rgba(27, 110, 70, 0.08);
  --focus: #143b78;

  /* Hero & Elevation: Sunlit Warm Stone & Royal Sapphire Studio Aura */
  --hero-bg: linear-gradient(128deg, #132544 0%, #193461 54%, #223f70 100%);
  --hero-glow: radial-gradient(circle at 76% 42%, rgba(229, 180, 84, 0.28) 0%, rgba(255, 255, 255, 0.08) 46%, transparent 72%);
  --hero-scrim: linear-gradient(92deg, #10203b 8%, rgba(16, 32, 59, 0.88) 48%, rgba(16, 32, 59, 0.1) 86%);
  --hero-text: #fbfaf7;
  --hero-subtext: #d7dfed;
  --hero-border: rgba(20, 59, 120, 0.16);

  --shadow-sm: 0 10px 28px -12px rgba(17, 22, 34, 0.07);
  --shadow-md: 0 18px 42px -14px rgba(17, 22, 34, 0.11);
  --shadow-lg: 0 28px 68px -18px rgba(17, 22, 34, 0.16);
}