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

:root {
  /* ---------- Light theme — monochrome graphite (no accent colour) ---------- */
  --bg:            #ffffff;
  --bg-soft:       #f6f6f7;
  --bg-card:       #ffffff;
  --border:        #e4e5e8;
  --text:          #18181b;
  --text-muted:    #56585e;
  --text-faint:    #8b8d93;
  --accent:        #2c2c2e;  /* charcoal */
  --accent-soft:   #ececed;  /* chip background */
  --accent-strong: #000000;
  --link:          #2c2c2e;
  --link-hover:    #000000;
  --rule:          #dadbde;

  /* Atom defaults — polished silicon-style silver on white.
     Per-element variants (.atom--carbon, etc.) override these locally. */
  --atom-nucleus:  #5b6573;     /* electrons + fallback nucleus color */
  --atom-orbit:    #7a8693;     /* shell + lobes */
  --atom-glow:     transparent;
  /* metallic gradient stops for the nucleus */
  --metal-hi:      #e6eaef;
  --metal-mid:     #98a2af;
  --metal-lo:      #3e4754;

  /* Carbon variant — matte black, like carbon fibre.
     Nucleus gradient is hard-coded in index.html (#atom-metal-carbon);
     these only drive orbit stroke colour + electron fill. */
  --carbon-nucleus: #1a1a1a;
  --carbon-orbit:   #3a3a3a;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(20, 30, 40, 0.04);
  --shadow-md: 0 4px 16px rgba(20, 30, 40, 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 — monochrome graphite (silver accent matches atoms) ---------- */
  --bg:            #0c0d10;
  --bg-soft:       #15171b;
  --bg-card:       #181a1f;
  --border:        #262930;
  --text:          #e8eaee;
  --text-muted:    #9ea3ad;
  --text-faint:    #6a6f78;
  --accent:        #d8dde6;  /* silver — same family as the atoms */
  --accent-soft:   #25282f;
  --accent-strong: #ffffff;
  --link:          #d8dde6;
  --link-hover:    #ffffff;
  --rule:          #262930;

  /* Atom defaults (dark) — polished silicon wafer */
  --atom-nucleus:  #d6dde6;
  --atom-orbit:    #a5b0bd;
  --atom-glow:     #e8edf4;
  --metal-hi:      #f5f7fa;
  --metal-mid:     #b6bfcc;
  --metal-lo:      #4a525e;

  /* Carbon variant in dark mode — lift values so they read on dark bg */
  --carbon-nucleus: #c8c8c8;
  --carbon-orbit:   #6e6e6e;

  --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; }
}