:root {
  /* BACKGROUNDS */
  --bg: #050505;
  --bg-soft: #0c0c0c;

  /* CARDS */
  --card: #141414;
  --card-soft: #1c1c1c;

  /* TEXT */
  --text: #ffffff;
  --muted: #9a9a9a;

  /* PRIMARY */
  --primary: #FFD400;
  --primary-strong: #FFC800;
  --primary-soft: rgba(255,212,0,.12);

  --primary-text: #050505;

  /* UI */
  --border: rgba(255,255,255,.08);

  /* SHADOWS */
  --shadow: 0 20px 60px rgba(0,0,0,.5);
  --shadow-soft: 0 10px 30px rgba(0,0,0,.35);

  /* RADIUS */
  --radius: 22px;
  --radius-sm: 14px;

  /* GLOW */
  --glow: 0 0 0 1px rgba(255,212,0,.15), 0 8px 30px rgba(255,212,0,.08);
}

/* LIGHT MODE */
[data-theme="light"] {
  --bg: #f6f6f3;
  --bg-soft: #ffffff;

  --card: #ffffff;
  --card-soft: #f1f1ee;

  --text: #0b0b0b;
  --muted: #6a6a6a;

  --primary: #050505;
  --primary-strong: #000;
  --primary-soft: rgba(0,0,0,.05);

  --primary-text: #ffffff;

  --border: rgba(0,0,0,.08);

  --shadow: 0 20px 60px rgba(0,0,0,.10);
  --shadow-soft: 0 10px 30px rgba(0,0,0,.06);

  --glow: 0 0 0 1px rgba(0,0,0,.08);
}