:root{

  /* Native controls (select/inputs/scrollbars) follow the theme */
  color-scheme: light;

  /* Brand */
  --primary:#0f766e;
  --primary-hover:#0d9488;
  --primary-light:#ccfbf1;
  --primary-gradient:linear-gradient(135deg,#0f766e,#14b8a6);

  /* Semantic */
  --danger:#dc2626;
  --danger-light:#fee2e2;
  --warning:#d97706;
  --warning-light:#fef3c7;
  --success:#16a34a;
  --success-light:#dcfce7;
  --info:#0369a1;
  --info-light:#e0f2fe;

  /* Surface */
  --bg:#f1f5f9;
  --card:#ffffff;

  /* Text */
  --text:#111827;
  --text-muted:#6b7280;
  --text-subtle:#94a3b8;

  /* Border */
  --border:#e5e7eb;
  --border-strong:#d1d5db;

  /* Radius */
  --radius:10px;
  --radius-sm:6px;
  --radius-lg:14px;

  /* Shadow */
  --shadow-sm:0 1px 3px rgba(0,0,0,0.06),0 1px 2px rgba(0,0,0,0.04);
  --shadow:0 4px 12px rgba(0,0,0,0.07);
  --shadow-lg:0 10px 28px rgba(0,0,0,0.10);

}

/* ===== DARK THEME ===================================================
   Applied when <html data-theme="dark"> is set (by the cookie boot
   script in the layout). Only the surface / text / border / shadow and
   the semantic tokens flip — the teal brand is brightened so it reads
   on dark. Every rule that uses these tokens re-themes automatically. */
:root[data-theme="dark"]{

  color-scheme: dark;

  /* Brand — brightened so teal is legible on a dark surface */
  --primary:#2dd4bf;
  --primary-hover:#5eead4;
  --primary-light:#0c332f;
  --primary-gradient:linear-gradient(135deg,#0d9488,#2dd4bf);

  /* Semantic — brighter text tones + deep tinted chip backgrounds */
  --danger:#f87171;   --danger-light:#3a1d1f;
  --warning:#fbbf24;  --warning-light:#3a2e12;
  --success:#4ade80;  --success-light:#14321f;
  --info:#38bdf8;     --info-light:#0e2a3b;

  /* Surface */
  --bg:#0b1220;
  --card:#131c2e;

  /* Text */
  --text:#e6e9ef;
  --text-muted:#9aa4b2;
  --text-subtle:#6b7688;

  /* Border */
  --border:#26324a;
  --border-strong:#3a4763;

  /* Shadow — deeper so elevation still reads on dark */
  --shadow-sm:0 1px 3px rgba(0,0,0,0.45),0 1px 2px rgba(0,0,0,0.35);
  --shadow:0 4px 12px rgba(0,0,0,0.5);
  --shadow-lg:0 10px 28px rgba(0,0,0,0.6);

}