:root {
  --bg: #f5f5f5;
  --surface: #ffffff;
  --border: #9e9e9e;
  --text: #000000;
  --text-muted: #4d4d4d;
  --accent: #1F618D;
  --accent-dark: #2980b9;
  --hover: #eaf2fb;
  --focus-bg: #ebf5fb;
  --code-bg: #f4f4f4;
  --error: #e74c3c;
  --success: #27ae60;
  --shadow: rgba(0,0,0,0.08);
  --shadow-popup: 0 4px 12px rgba(0,0,0,0.12);
  --shadow-modal: 0 8px 24px rgba(0,0,0,0.25);
  --scrim: rgba(0,0,0,0.4);

  /* Menu color scheme. sol-menu / sol-dropdown-button popups + items theme
     from THESE tokens (not --surface/--text directly) so a menu keeps correct
     contrast even when a host app remaps --surface/--text for its own areas.
     Values are CONCRETE (not var(--surface)) on purpose — that's what makes
     them immune to such remapping. An app may still override --menu-* to match
     its own theme, but the default is always legible. (light values) */
  --menu-bg: #ffffff;
  --menu-text: #1a1a1a;
  --menu-border: #d9d9d9;
  --menu-hover-bg: #eef2f7;
  --menu-hover-color: #1565c0;
  --menu-active-bg: #e3f2fd;
  --menu-active-color: #1565c0;

  /* Form fields. Concrete light values that are deliberately NOT remapped by a
     dark theme (like --menu-* above) so an input/select/textarea is ALWAYS a
     light field with dark text — lighter than, and clearly distinguishable
     from, a dark page background. An app may override --input-* for its theme. */
  --input-bg: #eef;
  --input-text: #1a1a1a;
  --input-border: #9aa0a8;

  /* doc-page palette */
  --pre-bg: #2c3e50;
  --pre-fg: #ecf0f1;
  --th-bg: #f0f4f8;
  --link: #2980b9;
  --link-border: #d0dce8;
  --note-bg: #fff8e1;     --note-border: #f9a825;
  --warn-bg: #fdecea;     --warn-border: #e53935;
  --tip-bg:  #e8f5e9;     --tip-border:  #43a047;
  --hero-bg: #e3f2fd;     --hero-border: #1976d2;
  --small-font: 16px;
  --medium-font: 20px;
  --large-font: 24px;
  --font-size: var(--medium-font, 20px);
  --font-ui: 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
  --font-weight-normal: 400;
  --font-weight-bold: 600;
  --line-height-tight: 1.25;
  --line-height-base: 1.5;

  /* spacing scale */
  --space-xs: 2px;
  --space-sm: 4px;
  --space-md: 8px;
  --space-lg: 12px;
  --space-xl: 16px;
  --space-2xl: 24px;

  /* radius scale */
  --radius-sm: 4px;
  --radius-md: 6px;

  /* Project-standard section divider — a muted double rule used between
     a control / list area and the content area it labels (dashboard
     header → feed grid, feed top-bar → articles, etc.). Set as a
     single `border` shorthand so a page can override the whole look
     with one custom-property assignment, e.g.
       :root { --divider-line: 1px solid var(--accent); }
     Custom properties cascade through shadow-DOM boundaries, so this
     reaches every component without a per-element selector. */
  --divider-line: 3px double var(--border);

  /* component sizing */
  --menu-nav-min-width: 140px;
  --menu-nav-max-width: 260px;
  --menu-popup-min-width: 160px;
  --bnode-modal-max-width: min(90vw, 700px);
  --bnode-modal-max-height: 80vh;
}
[data-theme="dark"] {
  --bg: #1a1a1a;
  --surface: #252525;
  --border: #3e3e3e;
  --text: #e0e0e0;
  --text-muted: #909090;
  --hover: #2e2e2e;
  --focus-bg: #2a2e34;
  --code-bg: #1e1e1e;
  --accent: #4dabf7;
  --accent-dark: #339af0;

  /* Menu color scheme — dark values (see :root for rationale). */
  --menu-bg: #2a2c30;
  --menu-text: #e8e8ea;
  --menu-border: #41454c;
  --menu-hover-bg: #3a3d44;
  --menu-hover-color: #8ecbff;
  --menu-active-bg: #34373d;
  --menu-active-color: #8ecbff;

  --pre-bg: #0e1620;
  --pre-fg: #cfd9e6;
  --th-bg: #2a2e34;
  --link: #6cc0f5;
  --link-border: #3e4a55;
  --note-bg: #2e2814;     --note-border: #d4a020;
  --warn-bg: #2e1817;     --warn-border: #e57373;
  --tip-bg:  #15281a;     --tip-border:  #66bb6a;
  --hero-bg: #122a3e;     --hero-border: #4dabf7;
}

/* Menus follow a dark OS preference even with no explicit [data-theme] (e.g. an
   app whose default theme is dark). Scoped to --menu-* ONLY — it does not turn
   on dark mode for anything else — and yields to an explicit light choice. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --menu-bg: #2a2c30;
    --menu-text: #e8e8ea;
    --menu-border: #41454c;
    --menu-hover-bg: #3a3d44;
    --menu-hover-color: #8ecbff;
    --menu-active-bg: #34373d;
    --menu-active-color: #8ecbff;
  }
}

*, *::before, *::after { box-sizing: border-box; }

/* Inputs are ALWAYS a light field (see --input-* above), so they stay legible
   and obviously editable on any background, including dark themes. Checkboxes /
   radios / range / color keep their native rendering. A component may still set
   its own borders/padding (more specific) — only the field colour is enforced. */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
select,
textarea {
  /* color-scheme: light forces the UA to paint the control (incl. native
     <select>) as a LIGHT field even when a dark theme set color-scheme: dark on
     an ancestor — without it, native controls render dark and ignore the bg. */
  color-scheme: light;
  background: var(--input-bg, #ffffff);
  color: var(--input-text, #1a1a1a);
  border: 1px solid var(--input-border, #9aa0a8);
}

/* Respect the user's reduced-motion preference: neutralize animations and
   transitions across the document scope (the shell + light-DOM component
   surfaces). Individual shadow-DOM components can honour it in their own CSS. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}