:root,
[data-theme="dark"] {
  /* Global Canvas Colors - Neutral architectural graphite */
  --bg-global: #090b0e;
  --bg-global-dark: #050608;
  --bg-canvas-mesh: none;
  --canvas-grid-color: rgba(255, 255, 255, 0.028);
  --canvas-glow-1: transparent;
  --canvas-glow-2: transparent;

  /* Island Surface Colors */
  --bg-island-dark: #101317;
  --bg-island-elevated: #15191e;
  --bg-island-light: #12161a;
  --bg-island-white: #12161a;
  --bg-island-card: #171b20;
  --bg-island-contrast: #1d2228;

  /* Primary Accent (Turquoise - Used disciplined in texts, buttons, borders) */
  --primary-turquoise: #5aabbb;
  --primary-turquoise-hover: #95c7ce;
  --primary-turquoise-subtle: rgba(90,171,187, 0.1);
  --primary-turquoise-border: rgba(90,171,187, 0.32);
  --primary-turquoise-glow: rgba(90,171,187, 0.2);

  /* Text System */
  --text-primary: #f4f7f5;
  --text-heading: #ffffff;
  --text-muted: #8d949c;
  --text-subtle: #606871;
  --text-dark: #f4f7f5;
  --text-dark-muted: #9ba2aa;
  --text-light-pure: #ffffff;
  --text-light: #f4f7f5;

  /* Structural Borders */
  --border-dark: rgba(255, 255, 255, 0.1);
  --border-dark-strong: rgba(255, 255, 255, 0.15);
  --border-dark-highlight: rgba(90,171,187, 0.32);
  --border-light: rgba(255, 255, 255, 0.1);
  --border-light-strong: rgba(255, 255, 255, 0.14);

  /* Shadows & Depth */
  --shadow-island-dark:
    0 20px 50px -15px rgba(0, 0, 0, 0.55), 0 0 1px rgba(255, 255, 255, 0.06);
  --shadow-island-light:
    0 20px 50px -15px rgba(0, 0, 0, 0.55), 0 0 1px rgba(255, 255, 255, 0.06);
  --shadow-floating: 0 28px 70px -18px rgba(0, 0, 0, 0.65);
  --nav-bg: rgba(16, 19, 23, 0.88);
  --nav-bg-scrolled: rgba(9, 11, 14, 0.96);
  --nav-border: rgba(255, 255, 255, 0.1);

  /* Radius Architecture */
  --radius-island-xl: 28px;
  --radius-island-lg: 20px;
  --radius-island-md: 16px;
  --radius-island-sm: 10px;
  --radius-pill: 9999px;

  /* Spacing Math (Symmetrical, no left/right drift) */
  --island-margin-desktop: 28px;
  --island-margin-tablet: 20px;
  --island-margin-mobile: 14px;

  --island-gap-lg: 84px;
  --island-gap-md: 60px;
  --island-gap-sm: 36px;

  /* Typography */
  --font-display:
    "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    sans-serif;
  --font-body:
    "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    sans-serif;
  --font-mono: "JetBrains Mono", monospace;

  /* Easing curves */
  --ease-out-smooth: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

[data-theme="light"] {
  /* Global Canvas Colors - Clean, airy architectural off-white (NO turquoise background) */
  --bg-global: #f6f8f7;
  --bg-global-dark: #ebf0ee;
  --bg-canvas-mesh: none;
  --canvas-grid-color: rgba(0, 0, 0, 0.035);
  --canvas-glow-1: transparent;
  --canvas-glow-2: transparent;

  /* Island Surface Colors - Crisp White & soft elevated stone */
  --bg-island-dark: #ffffff;
  --bg-island-elevated: #ffffff;
  --bg-island-light: #ffffff;
  --bg-island-white: #ffffff;
  --bg-island-card: #f8faf9;
  --bg-island-contrast: #edf2f0;

  /* Primary Accent (Turquoise - Deep Teal with high contrast on white) */
  --primary-turquoise: #5aaab9;
  --primary-turquoise-hover: #4a93a1;
  --primary-turquoise-subtle: rgba(90,170,185, 0.1);
  --primary-turquoise-border: rgba(90,170,185, 0.28);
  --primary-turquoise-glow: rgba(90,170,185, 0.15);

  /* Text System - Crisp dark charcoal for maximum readability */
  --text-primary: #121a18;
  --text-heading: #0b1210;
  --text-muted: #53625e;
  --text-subtle: #73837f;
  --text-dark: #121a18;
  --text-dark-muted: #53625e;
  --text-light-pure: #0b1210;
  --text-light: #121a18;

  /* Structural Borders */
  --border-dark: rgba(0, 0, 0, 0.1);
  --border-dark-strong: rgba(0, 0, 0, 0.14);
  --border-dark-highlight: rgba(90,170,185, 0.28);
  --border-light: rgba(0, 0, 0, 0.1);
  --border-light-strong: rgba(0, 0, 0, 0.14);

  /* Shadows & Depth */
  --shadow-island-dark:
    0 10px 30px -8px rgba(0, 0, 0, 0.06), 0 0 1px rgba(0, 0, 0, 0.05);
  --shadow-island-light:
    0 10px 30px -8px rgba(0, 0, 0, 0.06), 0 0 1px rgba(0, 0, 0, 0.05);
  --shadow-floating: 0 18px 45px -12px rgba(0, 0, 0, 0.1);
  --nav-bg: rgba(255, 255, 255, 0.92);
  --nav-bg-scrolled: rgba(255, 255, 255, 0.98);
  --nav-border: rgba(0, 0, 0, 0.1);
}