:root {
  --bg: #f5f5f5;
  --surface: #ffffff;
  --border: #9e9e9e;
  --text: #000000;
  --text-muted: #4d4d4d;
  --accent: #3498db;
  --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);

  /* 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;
}
/*
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #1a1a1a;
--focus-bg:  #e0e0e0;
    --surface: #252525;
--surface: #909090;
    --border: #3e3e3e;
    --text: #e0e0e0;
--text:#000;
    --text-muted: #909090;
    --hover: #2e2e2e;
    --focus-bg: #2a2e34;
    --code-bg: #1e1e1e;
    --accent: #4dabf7;
    --accent-dark: #339af0;
  }
}
*/
[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;

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

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