:root{
  /* Palette (light by default) */
  --color-bg:#fff;                 /* page background */
  --color-surface:#f3f4f6;            /* subdued surfaces */
  --color-text:#3C4242;               /* primary text */
  --color-text-strong:#000000;        /* titles/headings */
  --color-text-muted:#6b7280;         /* secondary text */
  --color-border:#e5e7eb;             /* borders/dividers */
  --color-primary:#484848;            /* brand accent */
  --color-accent:#22c55e;
  --color-danger:#ef4444;

  /* Spacing */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px; --space-6:24px; --space-8:32px; --space-12:48px;

  /* Radius */
  --radius-1:6px; --radius-2:8px; --radius-3:12px; --radius-round:999px;

  /* Shadows */
  --shadow-1:0 1px 2px rgba(0,0,0,.06);
  --shadow-2:0 12px 32px rgba(0,0,0,.12);

  /* Typography */
  --font-sans:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Inter,Arial,sans-serif;
  --text-xs:12px; --text-sm:14px; --text-md:16px; --text-lg:18px; --text-xl:22px; --text-2xl:28px;
}

@media (prefers-color-scheme: dark){
  :root{
    /* Inverted from light */
    --color-bg:#000000;
    --color-surface:#111827;
    --color-text:#e5e7eb;
    --color-text-strong:#ffffff;
    --color-text-muted:#9ca3af;
    --color-border:#1f2937;
    --color-primary:#bbbbbb;
  }
}