:root {
  /* Base palette (provided) */
  --color-palette-1: #0c0c0c;
  --color-palette-2: #1f6796;
  --color-palette-3: #f1d826;
  --color-palette-4: #d9dde1;
  --color-palette-5: #0284c7;

  /* Additional light tones */
  --color-light-1: #fefefe;
  --color-light-2: #f8f8f8;

  /* Additional dark tones */
  --color-dark-1: #232323;
  --color-dark-2: #050505;

  /* Grey tones */
  --muted: #5f6870;
  --light-alpha: rgba(255, 255, 255, 0.55);
  --dark-alpha: rgba(255, 255, 255, 0.14);

  /* Semantic colors */
  --primary: var(--color-palette-2);
  --primary-dark: var(--color-palette-1);
  --accent: var(--color-palette-3);
  --accent-soft: var(--color-palette-3);
  --highlight-strong: var(--color-palette-5);
  --highlight-soft: rgba(2, 132, 199, 0.16);
  --ink: var(--color-dark-1);

  --bg: var(--color-light-2);
  --line: var(--color-palette-4);
  --white: var(--color-light-1);
  --focus-ring: var(--color-palette-3);

  /* UI surface and overlay tokens */
  --topbar-bg: var(--color-palette-1);
  --topbar-text: var(--color-light-1);
  --skip-link-text: var(--color-palette-1);
  --header-bg: rgba(254, 254, 254, 0.94);
  --header-bg-scrolled: rgba(254, 254, 254, 0.98);
  --header-border: rgba(31, 103, 150, 0.2);
  --header-shadow: 0 8px 28px rgba(12, 12, 12, 0.22);
  --panel-shadow: 0 16px 35px rgba(12, 12, 12, 0.12);
  --panel-shadow-hover: 0 12px 26px rgba(12, 12, 12, 0.16);
  --logo-badge-gradient: linear-gradient(135deg, var(--color-palette-2), #2f80b4);
  --hero-bg: var(--color-palette-1);
  --hero-overlay: linear-gradient(105deg, rgba(12, 12, 12, 0.92) 38%, rgba(31, 103, 150, 0.62));
  --hero-text: var(--color-light-2);
  --hero-card-contrast-1: rgba(255, 136, 0, 0.2);
  --hero-card-contrast-2: rgba(124, 58, 237, 0.16);
  --hero-card-contrast-3: rgba(241, 216, 38, 0.14);
  --btn-primary-text: var(--color-dark-1);
  --btn-primary-hover: var(--accent-soft);
  --btn-primary-shadow: 0 12px 24px rgba(241, 216, 38, 0.35);
  --btn-light-border: var(--light-alpha);
  --btn-light-hover-bg: var(--dark-alpha);
  --btn-light-shadow: 0 14px 28px rgba(2, 132, 199, 0.28);
  --btn-gloss: rgba(255, 255, 255, 0.38);
  --progress-track-bg: var(--color-light-1);
  --progress-fill: linear-gradient(90deg, var(--color-palette-2), var(--color-palette-3));
  --stats-overlay: linear-gradient(rgba(12, 12, 12, 0.9), rgba(12, 12, 12, 0.9));
  --about-image-overlay: linear-gradient(rgba(12, 12, 12, 0.35), rgba(12, 12, 12, 0.35));
  --stats-text: var(--color-light-1);
  --input-border: var(--color-palette-4);
  --input-focus-shadow: 0 0 0 2px rgba(31, 103, 150, 0.25);
  --feedback-text: var(--color-palette-2);
  --footer-bg: var(--color-dark-2);
  --footer-text: var(--color-palette-4);
}

[data-theme="dark"] {
  --muted: #9fb0c1;
  --light-alpha: rgba(255, 255, 255, 0.45);
  --dark-alpha: rgba(255, 255, 255, 0.08);
  --ink: #e6edf3;

  --bg: #11151a;
  --line: #2a3440;
  --white: #181e26;
  --focus-ring: #f1d826;

  --topbar-bg: #090d12;
  --topbar-text: #e6edf3;
  --skip-link-text: #090d12;
  --header-bg: rgba(9, 13, 18, 0.9);
  --header-bg-scrolled: rgba(9, 13, 18, 0.96);
  --header-border: rgba(2, 132, 199, 0.35);
  --header-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
  --panel-shadow: 0 16px 35px rgba(0, 0, 0, 0.35);
  --panel-shadow-hover: 0 12px 26px rgba(0, 0, 0, 0.45);
  --logo-badge-gradient: linear-gradient(135deg, #1f6796, #0284c7);
  --hero-bg: #05080c;
  --hero-overlay: linear-gradient(105deg, rgba(5, 8, 12, 0.92) 38%, rgba(18, 51, 74, 0.7));
  --hero-text: #e6edf3;
  --hero-card-contrast-1: rgba(2, 132, 199, 0.2);
  --hero-card-contrast-2: rgba(241, 216, 38, 0.14);
  --hero-card-contrast-3: rgba(31, 103, 150, 0.2);
  --btn-primary-text: #0c0c0c;
  --btn-primary-hover: #f5df4f;
  --btn-primary-shadow: 0 12px 24px rgba(241, 216, 38, 0.28);
  --btn-light-border: rgba(230, 237, 243, 0.45);
  --btn-light-hover-bg: rgba(230, 237, 243, 0.1);
  --btn-light-shadow: 0 14px 28px rgba(2, 132, 199, 0.2);
  --btn-gloss: rgba(255, 255, 255, 0.22);
  --progress-track-bg: #0f141b;
  --progress-fill: linear-gradient(90deg, #2f80b4, #f1d826);
  --stats-overlay: linear-gradient(rgba(5, 8, 12, 0.9), rgba(5, 8, 12, 0.9));
  --about-image-overlay: linear-gradient(rgba(5, 8, 12, 0.45), rgba(5, 8, 12, 0.45));
  --stats-text: #e6edf3;
  --input-border: #344455;
  --input-focus-shadow: 0 0 0 2px rgba(2, 132, 199, 0.35);
  --feedback-text: #72c3f2;
  --footer-bg: #070b10;
  --footer-text: #c8d3de;
}