:root {
  color-scheme: light;

  /* Cool grayscale */
  --gray-900: #1b1d1f;
  --gray-800: #26282b;
  --gray-600: #454c53;
  --gray-500: #686e75;
  --gray-200: #c9cdd2;
  --gray-100: #e8ebed;
  --gray-50: #f7f8f9;
  --gray-900-rgb: 27, 29, 31;

  /* Blue palette */
  --primary-color: #2196f3;
  /* Text and solid fills that must pass WCAG AA (5.75:1 on white) */
  --primary-strong: #1565c0;
  --secondary-color: #448aff;
  --vivid-blue: #2979ff;
  --accent-color: #0d47a1;
  --deep-blue: #1565c0;
  --light-blue: #82b1ff;
  --alice-blue: #f0f8ff;
  --blue-gray: #3f5f7a;
  --primary-rgb: 33, 150, 243;
  --secondary-rgb: 68, 138, 255;
  --accent-rgb: 13, 71, 161;
  --deep-blue-rgb: 21, 101, 192;
  --sky-blue-rgb: 66, 165, 245;
  --light-blue-rgb: 130, 177, 255;
  --soft-blue-rgb: 187, 222, 251;
  --alice-blue-rgb: 240, 248, 255;
  --blue-gray-rgb: 63, 95, 122;

  /* Semantic colors */
  --text-dark: var(--gray-900);
  --text-light: var(--gray-500);
  --surface-blue: var(--alice-blue);
  --section-band: var(--alice-blue);
  --section-divider: rgba(var(--blue-gray-rgb), 0.14);
  --bg-gradient: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
  --on-accent: #ffffff;
  --on-primary: #ffffff;

  /* Theme surfaces */
  --page-background: #ffffff;
  --surface: #ffffff;
  --surface-raised: #ffffff;
  --surface-rgb: 255, 255, 255;
  --nav-background: rgba(255, 255, 255, 0.78);
  --nav-background-scrolled: rgba(255, 255, 255, 0.92);
  --glass-soft: rgba(255, 255, 255, 0.62);
  --glass: rgba(255, 255, 255, 0.78);
  --glass-strong: rgba(255, 255, 255, 0.88);
  --hero-scrim-start: rgba(255, 255, 255, 0.94);
  --hero-scrim-end: rgba(var(--alice-blue-rgb), 0.7);
  --hero-image-filter: saturate(0.88) brightness(0.98);
  --page-hero-grid-line: rgba(255, 255, 255, 0.13);
  --page-hero-background: linear-gradient(
    135deg,
    rgba(var(--deep-blue-rgb), 0.95) 0%,
    rgba(var(--secondary-rgb), 0.92) 100%
  );
  --project-image-overlay: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.34) 0%,
      rgba(255, 255, 255, 0.72) 100%
    ),
    radial-gradient(
      circle at 50% 45%,
      rgba(255, 255, 255, 0.16) 0%,
      rgba(255, 255, 255, 0.5) 100%
    );
  --lightbox-backdrop: rgba(255, 255, 255, 0.48);
  --footer-background: #1b1d1f;
  --shadow-rgb: 63, 95, 122;
  --filter-background: linear-gradient(
    112deg,
    rgba(var(--alice-blue-rgb), 0.98) 0%,
    rgba(var(--soft-blue-rgb), 0.72) 34%,
    rgba(255, 255, 255, 0.96) 74%,
    rgba(var(--alice-blue-rgb), 0.98) 100%
  );
  --filter-paint: linear-gradient(
      98deg,
      rgba(var(--alice-blue-rgb), 0) 0%,
      rgba(var(--light-blue-rgb), 0.22) 24%,
      rgba(var(--soft-blue-rgb), 0.64) 42%,
      rgba(var(--secondary-rgb), 0.16) 58%,
      rgba(255, 255, 255, 0.4) 74%,
      rgba(var(--alice-blue-rgb), 0) 100%
    ),
    linear-gradient(
      148deg,
      rgba(255, 255, 255, 0.18) 0%,
      rgba(var(--soft-blue-rgb), 0.4) 36%,
      rgba(var(--sky-blue-rgb), 0.18) 54%,
      rgba(var(--alice-blue-rgb), 0.12) 100%
    );
}

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

  --gray-900: #f4f7fb;
  --gray-800: #e2e8f0;
  --gray-600: #c0cad7;
  --gray-500: #98a6b8;
  --gray-200: #2e3a49;
  --gray-100: #1c2530;
  --gray-50: #0a0f15;
  --gray-900-rgb: 244, 247, 251;

  --primary-color: #6db9ff;
  --primary-strong: #6db9ff;
  --secondary-color: #8ab4ff;
  --vivid-blue: #69aaff;
  --accent-color: #9bcbff;
  --deep-blue: #79bdf8;
  --light-blue: #b5d8ff;
  --alice-blue: #0f1b28;
  --blue-gray: #bdc9d7;
  --primary-rgb: 109, 185, 255;
  --secondary-rgb: 138, 180, 255;
  --accent-rgb: 155, 203, 255;
  --deep-blue-rgb: 121, 189, 248;
  --sky-blue-rgb: 85, 164, 228;
  --light-blue-rgb: 98, 153, 214;
  --soft-blue-rgb: 43, 83, 119;
  --alice-blue-rgb: 15, 27, 40;
  --blue-gray-rgb: 189, 201, 215;

  --text-dark: var(--gray-900);
  --text-light: #b2bfce;
  --surface-blue: #0b121b;
  --section-band: #0b121b;
  --section-divider: rgba(var(--primary-rgb), 0.12);
  --page-background: #070a0f;
  --surface: #0e131a;
  --surface-raised: #151c25;
  --surface-rgb: 14, 19, 26;
  --nav-background: rgba(7, 10, 15, 0.86);
  --nav-background-scrolled: rgba(7, 10, 15, 0.96);
  --glass-soft: rgba(21, 28, 37, 0.72);
  --glass: rgba(21, 28, 37, 0.84);
  --glass-strong: rgba(21, 28, 37, 0.94);
  --hero-scrim-start: rgba(2, 4, 7, 0.985);
  --hero-scrim-end: rgba(5, 9, 15, 0.95);
  --hero-image-filter: saturate(0.42) brightness(0.68) contrast(1.04);
  --page-hero-background: linear-gradient(135deg, #080d14 0%, #111923 100%);
  --page-hero-grid-line: rgba(138, 180, 255, 0.055);
  --on-primary: #08131e;
  --project-image-overlay: linear-gradient(
      180deg,
      rgba(4, 7, 11, 0.32) 0%,
      rgba(4, 7, 11, 0.78) 100%
    ),
    radial-gradient(
      circle at 50% 45%,
      rgba(25, 54, 80, 0.06) 0%,
      rgba(4, 7, 11, 0.5) 100%
    );
  --lightbox-backdrop: rgba(2, 3, 5, 0.88);
  --footer-background: #03050a;
  --shadow-rgb: 0, 0, 0;
  --filter-background: linear-gradient(
    112deg,
    rgba(6, 10, 15, 0.99) 0%,
    rgba(11, 18, 27, 0.98) 40%,
    rgba(7, 11, 17, 0.99) 74%,
    rgba(6, 10, 15, 0.99) 100%
  );
  --filter-paint: linear-gradient(
      98deg,
      rgba(15, 27, 40, 0) 0%,
      rgba(98, 153, 214, 0.08) 24%,
      rgba(43, 83, 119, 0.24) 42%,
      rgba(138, 180, 255, 0.07) 58%,
      rgba(21, 28, 37, 0.12) 74%,
      rgba(15, 27, 40, 0) 100%
    ),
    linear-gradient(
      148deg,
      rgba(21, 28, 37, 0.04) 0%,
      rgba(43, 83, 119, 0.16) 36%,
      rgba(85, 164, 228, 0.07) 54%,
      rgba(15, 27, 40, 0.03) 100%
    );
}