/* =============================================================================
   SciPHR site theme tokens — light default, dark optional.
   The brand is a symmetric black/white brutalist system, so "dark mode" is a
   straight inversion of "light mode". Components reference these role tokens
   (via SP_COL -> var(--c-*) in components.jsx) so a single [data-theme] switch
   flips the whole React marketing surface. docs.css carries the parallel set
   for /learn and /docs.
   Accent stays amber in both, darkened on light for legibility.
   ============================================================================= */

:root,
html[data-theme="light"] {
  --c-bg:          #FFFFFF;            /* page / dark-surface-in-dark            */
  --c-fg:          #0A0A0A;            /* primary text / hard border             */
  --c-fg-2:        #555555;            /* secondary text                         */
  --c-g-med:       #B4B4B4;            /* muted / disabled / soft shadow         */
  --c-fg-3:        #6E6E6E;            /* tertiary text / soft border            */
  --c-chrome:      #E2E2E2;            /* UI chrome lines / offset-shadow tone   */
  --c-accent:      #B5740A;            /* amber, darkened for white bg           */
  --c-error:       #C81E1E;
  --c-hover:       rgba(0,0,0,0.05);   /* hover wash                             */
  --c-faint:       rgba(0,0,0,0.04);   /* faint inset fill                       */
  --c-hairline:    rgba(0,0,0,0.20);   /* dashed/divider hairline                */
  --c-translucent: rgba(255,255,255,0.85); /* scrolled nav backdrop             */
  color-scheme: light;
}

html[data-theme="dark"] {
  --c-bg:          #000000;
  --c-fg:          #FFFFFF;
  --c-fg-2:        #E0E0E0;
  --c-g-med:       #C0C0C0;
  --c-fg-3:        #808080;
  --c-chrome:      #404040;
  --c-accent:      #FFB800;
  --c-error:       #FF4444;
  --c-hover:       rgba(255,255,255,0.05);
  --c-faint:       rgba(255,255,255,0.04);
  --c-hairline:    rgba(255,255,255,0.20);
  --c-translucent: rgba(0,0,0,0.85);
  color-scheme: dark;
}

html, body {
  margin: 0; padding: 0;
  background: var(--c-bg);
  color: var(--c-fg);
  -webkit-font-smoothing: antialiased;
  transition: background 200ms ease, color 200ms ease;
}
::selection { background: var(--c-fg); color: var(--c-bg); }

/* Theme toggle — brutalist mono chip, bordered, no icon font. */
.sp-theme-toggle {
  font-family: var(--sp-font-mono, Menlo, ui-monospace, monospace);
  font-size: 10px; letter-spacing: 0.25em; text-transform: uppercase;
  color: var(--c-fg); background: transparent;
  border: 1px solid var(--c-fg-3); border-radius: 0;
  padding: 6px 10px; cursor: pointer; line-height: 1;
  transition: border-color 150ms ease, color 150ms ease;
}
.sp-theme-toggle:hover { border-color: var(--c-fg); }