:root {
  color-scheme: dark light;
  --font-primary: "Roboto", sans-serif;

  --bg: #000000;
  --surface: #090b10;
  --surface-2: #22242b;
  --surface-3: #f3f3f3;
  --text: #f4f5f8;
  --muted: #9ea4b0;
  --line: #2b2f39;
  --brand: #de2b2b;
  --brand-contrast: #ffffff;
  --shadow: 0 6px 18px rgba(0, 0, 0, 0.36);
}

:root[data-theme="light"] {
  --bg: #f4f6fb;
  --surface: #ffffff;
  --surface-2: #edf1f8;
  --surface-3: #ffffff;
  --text: #111827;
  --muted: #5f6879;
  --line: #d9e0ec;
  --brand: #de2b2b;
  --brand-contrast: #ffffff;
  --shadow: 0 10px 24px rgba(20, 24, 34, 0.08);
}