:root {
  /* Light theme is a first-class design, not an inverted dark theme:
     a soft off-white canvas lets true-white cards read as physical,
     lifted surfaces, purely in black/white/grey. */
  color-scheme: light;
  --theme-bg: #ffffff;
  --theme-bg-rgb: 255, 255, 255;
  --theme-fg: #0a0a0a;
  --theme-fg-rgb: 0, 0, 0;
  --color-bg: #f6f6f8;
  --color-surface: #ffffff;
  --color-surface-2: #eeeef1;
  --color-surface-hover: #e8e8ec;
  --color-deep-surface: #ebebef;
  --color-glass-strong: rgba(255, 255, 255, 0.88);
  --color-border: #e3e3e9;
  --color-border-hover: #c7c7d1;
  --color-text: #14141a;
  --color-text-secondary: #5c5c68;
  --color-text-muted: #8b8b97;
  --color-primary-hover: #202020;
  --color-header: rgba(246, 246, 248, 0.78);
  --color-mobile-nav: rgba(250, 250, 251, 0.98);
  --color-image-overlay: rgba(255, 255, 255, 0.16);
  --color-haze-1: rgba(210, 214, 218, 0.5);
  --color-haze-2: rgba(228, 231, 233, 0.36);
  --color-haze-3: rgba(244, 245, 246, 0.2);
  --haze-blend: multiply;
  --color-noise-opacity: 0.018;
  --theme-logo-filter: invert(1);
  /* Case-study cover art is fixed, pre-designed dark artwork (like a photo) -
     inverting it just produces a washed-out grey smudge, so it stays as-is. */
  --work-image-filter: none;
  --hero-image-filter: brightness(var(--hero-img-brightness));
  --theme-glow-shadow: 0 0 60px rgba(0, 0, 0, 0.12);

  /* Elevation - light surfaces need real shadows to read as "lifted";
     dark surfaces get their depth from borders/glow instead. */
  --shadow-elevation-1: 0 1px 2px rgba(20, 20, 20, 0.04), 0 8px 20px -6px rgba(20, 20, 20, 0.08);
  --shadow-elevation-2: 0 2px 4px rgba(20, 20, 20, 0.05), 0 20px 40px -12px rgba(20, 20, 20, 0.14);
  --shadow-elevation-hover: 0 4px 10px rgba(20, 20, 20, 0.06), 0 28px 56px -14px rgba(20, 20, 20, 0.18);
  --shadow-header: 0 1px 0 rgba(20, 20, 20, 0.05), 0 12px 28px -16px rgba(20, 20, 20, 0.14);

  /* Typography */
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-size-xs:   0.6875rem; /* 11px */
  --font-size-sm:   0.8125rem; /* 13px */
  --font-size-base: 0.9375rem; /* 15px */
  --font-size-lg:   1.0625rem; /* 17px */
  --font-size-xl:   1.1875rem; /* 19px */
  --font-size-2xl:  1.375rem;  /* 22px */
  --font-size-3xl:  1.875rem;  /* 30px */
  --font-size-4xl:  2.5rem;    /* 40px */
  --font-size-hero: clamp(2.8rem, 5.5vw, 5rem);
  --line-height-tight: 1.05;
  --line-height-normal: 1.65;
  --letter-spacing-tight: -0.03em;
  --letter-spacing-wide:  0.1em;

  /* Spacing */
  --space-xs:  0.375rem;
  --space-sm:  0.75rem;
  --space-md:  1.25rem;
  --space-lg:  1.75rem;
  --space-xl:  2.5rem;
  --space-2xl: 3.5rem;
  --space-3xl: 5.5rem;
  --space-section: clamp(4.5rem, 7vw, 7rem);
  --section-gap: clamp(4.5rem, 6vw, 5.5rem);
  --section-inner: clamp(3rem, 4.5vw, 4.25rem);
  --section-gap-sm: clamp(3rem, 4.5vw, 4rem);
  --section-gap-mobile: clamp(3.5rem, 9vw, 4.5rem);
  --section-inner-mobile: clamp(2.25rem, 6vw, 3rem);

  /* Layout */
  --container-max: 1680px;
  --container-padding: clamp(1.25rem, 4.5vw, 4rem);
  --header-height: 68px;
  --radius-sm:   6px;
  --radius-md:   14px;
  --radius-pill: 9999px;

  /* Transitions */
  --ease-premium: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-smooth:  cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --transition-fast: 0.22s var(--ease-premium);
  --transition-base: 0.38s var(--ease-premium);
  --transition-slow: 0.65s var(--ease-premium);

  /* Shadows / glows */
  --shadow-card:   0 24px 48px rgba(0, 0, 0, 0.14);
  --glow-white:    0 0 24px rgba(0, 0, 0, 0.05);
  --blur-nav:      blur(16px);
}

html[data-theme="dark"] {
  color-scheme: dark;
  --theme-bg: #000000;
  --theme-bg-rgb: 0, 0, 0;
  --theme-fg: #ffffff;
  --theme-fg-rgb: 255, 255, 255;
  --color-bg: #000000;
  --color-surface: #0f0f0f;
  --color-surface-2: #161616;
  --color-surface-hover: #1c1c1c;
  --color-deep-surface: #050505;
  --color-glass-strong: rgba(12, 12, 12, 0.92);
  --color-border: rgba(255, 255, 255, 0.08);
  --color-border-hover: rgba(255, 255, 255, 0.18);
  --color-text: #ffffff;
  --color-text-secondary: #a0a0a0;
  --color-text-muted: #787878;
  --color-primary-hover: #f5f5f5;
  --color-header: rgba(0, 0, 0, 0.75);
  --color-mobile-nav: rgba(0, 0, 0, 0.97);
  --color-image-overlay: rgba(255, 255, 255, 0.14);
  --color-haze-1: rgba(32, 32, 36, 0.72);
  --color-haze-2: rgba(18, 18, 20, 0.54);
  --color-haze-3: rgba(8, 8, 9, 0.2);
  --haze-blend: normal;
  --color-noise-opacity: 0.025;
  --theme-logo-filter: none;
  --work-image-filter: none;
  --hero-image-filter: brightness(var(--hero-img-brightness));
  --theme-glow-shadow: 0 0 60px rgba(255, 255, 255, 0.14);
  --shadow-card: 0 24px 48px rgba(0, 0, 0, 0.6);
  --glow-white: 0 0 24px rgba(255, 255, 255, 0.06);

  --shadow-elevation-1: none;
  --shadow-elevation-2: none;
  --shadow-elevation-hover: 0 24px 48px rgba(0, 0, 0, 0.55);
  --shadow-header: 0 1px 0 rgba(0, 0, 0, 0.6);
}

/* Custom scrollbar */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: var(--color-bg); }
::-webkit-scrollbar-thumb { background: rgba(var(--theme-fg-rgb), 0.16); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(var(--theme-fg-rgb), 0.28); }

/* Text selection */
::selection { background: rgba(var(--theme-fg-rgb), 0.15); color: var(--color-text); }