:root {
  color-scheme: light;
  --font-sans: Inter, "Segoe UI", Arial, sans-serif;
  --bg: #fdfefe;
  --bg-soft: #f4f7fb;
  --surface: #ffffff;
  --surface-raised: #ffffff;
  --surface-navy: #031a35;
  --surface-navy-2: #062440;
  --text: #071a36;
  --text-soft: #4a5e79;
  --text-faint: #70829a;
  --line: #dce5f1;
  --line-strong: #c8d6e8;
  --blue: #0865f5;
  --blue-hover: #0055df;
  --blue-soft: #eaf2ff;
  --green: #0ca979;
  --danger: #d84153;
  --shadow-sm: 0 8px 24px rgba(12, 42, 84, .06);
  --shadow-md: 0 18px 54px rgba(12, 42, 84, .10);
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --container: 1360px;
  --gutter: 40px;
  --section: 120px;
  --header-h: 84px;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #061426;
  --bg-soft: #091a2e;
  --surface: #0c2037;
  --surface-raised: #102740;
  --surface-navy: #020d1c;
  --surface-navy-2: #071b31;
  --text: #edf4ff;
  --text-soft: #b3c1d3;
  --text-faint: #8799b0;
  --line: #1f3853;
  --line-strong: #2e4a68;
  --blue: #287dff;
  --blue-hover: #4c94ff;
  --blue-soft: #102d55;
  --shadow-sm: 0 8px 24px rgba(0, 0, 0, .18);
  --shadow-md: 0 18px 54px rgba(0, 0, 0, .27);
}