/* theme.css — tokens + system/user theme switching */

:root{
  color-scheme: light dark;

  /* Core surfaces + text */
  --bg: #f9fafb;
  --fg: #111827;
  --muted: #6b7280;
  --card: #ffffff;
  --border: #e5e7eb;
  --subtle: #f3f4f6;

  /* Info flash */
  --info-bg: #eff6ff;
  --info-border: #bfdbfe;
  --info-fg: #1e3a8a;

  /* Optional */
  --shadow: 0 1px 2px rgba(0,0,0,.06), 0 8px 24px rgba(0,0,0,.08);
}

/* System dark preference */
@media (prefers-color-scheme: dark){
  :root{
    /* neutral dark greys (minimal blue) */
    --bg: #141416;      /* near-black neutral */
    --fg: #dedee3;      /* light grey text */
    --muted: #a1a1aa;   /* muted grey */
    --card: #1b1b1f;    /* panel surface */
    --border: #2a2a2e;  /* dividers */
    --subtle: #1f1f23;  /* header strips / subtle fills */

    /* Info flash (still blue, but toned down) */
    --info-bg: #111827;      /* very dark, slight blue but subdued */
    --info-border: #2a2f3a;  /* muted border */
    --info-fg: #dbeafe;      /* soft light blue text */

    --shadow: 0 1px 2px rgba(0,0,0,.5), 0 18px 50px rgba(0,0,0,.55);
  }
}

html[data-theme="dark"]{
  --bg:#141416;
  --fg:#dedee3;
  --muted:#a1a1aa;
  --card:#1b1b1f;
  --border:#2a2a2e;
  --subtle:#1f1f23;

  --info-bg:#111827;
  --info-border:#2a2f3a;
  --info-fg:#dbeafe;
}

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

html[data-theme="light"]{
  --bg:#f9fafb; --fg:#111827; --muted:#6b7280; --card:#ffffff; --border:#e5e7eb; --subtle:#f3f4f6;
  --info-bg:#eff6ff; --info-border:#bfdbfe; --info-fg:#1e3a8a;
}

/*html[data-theme="dark"]{
  --bg:#0b1220; --fg:#e5e7eb; --muted:#94a3b8; --card:#0f172a; --border:#1f2a44; --subtle:#111c33;
  --info-bg:#0b1b33; --info-border:#1d3b66; --info-fg:#bfdbfe;
}*/

/* Base defaults (layered so Tailwind components can override) */
@layer base {
  body{ background: var(--bg); color: var(--fg); }
  a{ color: inherit; }
}