/* ============================================================
   Color schemes & design tokens
   Edit colors here only — every component reads from these vars.
   ============================================================ */

:root {
  /* ---------- Light theme — Silver palette ---------- */
  --bg:            rgb(255, 255, 255);
  --bg-soft:       rgba(149, 169, 189, 0.10);
  --bg-card:       rgb(255, 255, 255);
  --border:        rgba(149, 169, 189, 0.55);
  --text:          rgb(24, 42, 60);
  --text-muted:    rgb(71, 111, 152);
  --text-faint:    rgb(71, 111, 152);
  --accent:        rgb(71, 111, 152);
  --accent-soft:   rgba(149, 169, 189, 0.18);
  --accent-strong: rgb(22, 37, 54);
  --link:          rgb(71, 111, 152);
  --link-hover:    rgb(16, 45, 77);
  --rule:          rgba(149, 169, 189, 0.45);

  /* Atom defaults — flat Silver palette colors. */
  --atom-nucleus:  rgb(24, 42, 60);
  --atom-orbit:    rgb(31, 92, 138);
  --atom-glow:     transparent;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(16, 45, 77, 0.04);
  --shadow-md: 0 4px 16px rgba(16, 45, 77, 0.06);

  /* Typography & spacing */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --measure: 68ch;
  --radius: 10px;
  --radius-lg: 16px;
}

:root[data-theme="dark"] {
  /* ---------- Dark theme — graphite shell with Silver atom palette ---------- */
  --bg:            #0c0d10;
  --bg-soft:       #15171b;
  --bg-card:       #181a1f;
  --border:        #262930;
  --text:          #e8eaee;
  --text-muted:    #9ea3ad;
  --text-faint:    #6a6f78;
  --accent:        #d8dde6;
  --accent-soft:   #25282f;
  --accent-strong: #ffffff;
  --link:          #d8dde6;
  --link-hover:    #ffffff;
  --rule:          #262930;

  /* Atom defaults (dark) — flat Silver palette colors. */
  --atom-nucleus:  rgb(240, 247, 255);
  --atom-orbit:    rgb(111, 159, 202);
  --atom-glow:     rgb(243, 251, 255);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45);
}

/* Respect users who don't want animation */
@media (prefers-reduced-motion: reduce) {
  :root { --motion: 0; }
}