:root{
  color-scheme: light dark;

  /* Dark (default) */
  --bg: #0A0A0C;
  --surface: #111217;
  --text: #EDEDF2;
  --muted: #A6A8B3;
  --accent: #4AB8FF;
  --border: #2A2C35;
}

/* Light override */
:root[data-theme="light"]{
  --bg: #FFFFFF;
  --surface: #F4F5F7;
  --text: #0B0C10;
  --muted: #4B4F5C;
  --accent: #1A73E8;
  --border: #D9DBE1;
}
:root{
  --accent:#4c6ef5;
  --glow:rgba(76,110,245,.24);

  --r-lg:18px;
  --pad-lg:clamp(18px,3vw,28px);
  --maxw:1100px;

  --dur:280ms;
  --dur-fast:200ms;
  --ease:cubic-bezier(0.22,0.61,0.36,1);
  --lift:12px;
}

/* Falls dein theme.js html[data-theme="dark"] setzt */
html[data-theme="dark"]{
  --glow:rgba(76,110,245,.30);
}

/* Falls du stattdessen eine Klasse nutzt, ist das die Fallback-Option: */
html.dark{
  --glow:rgba(76,110,245,.30);
}
/* ====== Defaults (so pages never render raw) ====== */
:root{
  --bg:#0b0d12;
  --surface:rgba(255,255,255,.06);
  --surface-2:rgba(255,255,255,.09);
  --text:rgba(255,255,255,.92);
  --muted:rgba(255,255,255,.68);
  --border:rgba(255,255,255,.12);
  --accent:#4c6ef5;
  --glow:rgba(76,110,245,.28);

  --dur:280ms;
  --dur-fast:200ms;
  --ease:cubic-bezier(0.22,0.61,0.36,1);
  --lift:12px;
  --r-lg:18px;
  --pad-lg:clamp(18px,3vw,28px);
  --maxw:1100px;
}