/* Default to LIGHT when nothing is set */
:root{
  --bg: #f8fafc;
  --surface: #ffffff;
  --surface-2: #f9fafb;
  --text: #111827;
  --muted: #6b7280;
  --muted-2: #9ca3af;
  --border: #e5e7eb;

  --shadow: 0 12px 30px rgba(0,0,0,.12);

  /* Let the browser render built-in UI appropriately */
  color-scheme: light;
}

/* Force light */
html[data-theme="light"]{
  color-scheme: light;
}

/* Force dark */
html[data-theme="dark"]{
  --bg: #0b1220;
  --surface: #0f172a;
  --surface-2: #101a2e;
  --text: #e5e7eb;
  --muted: #a3aab6;
  --muted-2: #7b8596;
  --border: rgba(229,231,235,.12);

  --shadow: 0 12px 30px rgba(0,0,0,.45);

  color-scheme: dark;
}

/* System = follow prefers-color-scheme */
@media (prefers-color-scheme: dark){
  html[data-theme="system"]{
    --bg: #0b1220;
    --surface: #0f172a;
    --surface-2: #111c33;
    --text: #e5e7eb;
    --muted: #a3aab6;
    --muted-2: #7b8596;
    --border: rgba(229,231,235,.12);

    --shadow: 0 12px 30px rgba(0,0,0,.45);

    color-scheme: dark;
  }
}