/* ============================================================
   css/base/variables.css
   Zolto v8.1.0 — Design Token Declarations
   ============================================================
   Purpose:
   - Declare ALL CSS custom properties used across the system
   - This file defines defaults (dark theme baseline)
   - Theme files (css/themes/*.css) override these values
     via [data-theme="name"] selectors
   - Component files reference ONLY these tokens — never
     hardcoded values
   - Renderer injects document-level overrides as a <style>
     block AFTER this sheet, so per-document tokens win

   Token categories:
   1.  Accent
   2.  Background
   3.  Surface
   4.  Text
   5.  Border
   6.  Intent (semantic colours)
   7.  Syntax Highlighting
   8.  Typography
   9.  Spacing
   10. Radius
   11. Shadow
   12. Transition & Animation
   13. Z-index
   14. Layout (workspace dimensions)
   15. Editor
   16. Preview
   17. Sidebar
   18. Scrollbar
   19. Focus Ring
   20. Diagram
   21. Math
   22. Component-specific tokens
   ============================================================ */


/* ─────────────────────────────────────────────────────────────
   1. Accent
   ───────────────────────────────────────────────────────────── */

:root {
  --accent-primary:         #6366f1;   /* Indigo — primary brand */
  --accent-primary-hover:   #818cf8;   /* Lighter on hover */
  --accent-primary-active:  #4f46e5;   /* Darker on press */
  --accent-primary-subtle:  rgba(99, 102, 241, 0.12);
  --accent-primary-border:  rgba(99, 102, 241, 0.35);

  --accent-secondary:       #8b5cf6;   /* Violet */
  --accent-secondary-hover: #a78bfa;
  --accent-secondary-subtle: rgba(139, 92, 246, 0.12);

  --accent-tertiary:        #ec4899;   /* Pink */
  --accent-tertiary-hover:  #f472b6;
  --accent-tertiary-subtle: rgba(236, 72, 153, 0.12);
}


/* ─────────────────────────────────────────────────────────────
   2. Background
   ───────────────────────────────────────────────────────────── */

:root {
  --bg-app:         #0a0a0f;   /* Outermost app shell */
  --bg-canvas:      #111118;   /* Main content canvas */
  --bg-panel:       #16161f;   /* Sidebar, panels */
  --bg-surface:     #1c1c28;   /* Cards, elevated surfaces */
  --bg-surface-2:   #222233;   /* Hover state on surfaces */
  --bg-surface-3:   #2a2a3d;   /* Active/selected surface */
  --bg-overlay:     rgba(0, 0, 0, 0.7);  /* Modal/dialog backdrop */
  --bg-tooltip:     #2a2a3d;   /* Tooltip background */
  --bg-dropdown:    #1c1c28;   /* Dropdown menus */
  --bg-input:       #16161f;   /* Input field background */
  --bg-code:        #0f0f18;   /* Code block background */
  --bg-selection:   rgba(99, 102, 241, 0.2); /* Text selection */
}


/* ─────────────────────────────────────────────────────────────
   3. Surface (for rendered Zolto content)
   ───────────────────────────────────────────────────────────── */

:root {
  --surface-0:   var(--bg-canvas);    /* Document body */
  --surface-1:   var(--bg-surface);   /* Cards, blocks */
  --surface-2:   var(--bg-surface-2); /* Nested blocks */
  --surface-3:   var(--bg-surface-3); /* Deepest nesting */
  --surface-glass: rgba(28, 28, 40, 0.72);
  --surface-glass-blur: 12px;
}


/* ─────────────────────────────────────────────────────────────
   4. Text
   ───────────────────────────────────────────────────────────── */

:root {
  --text-main:     #f1f5f9;   /* Primary text */
  --text-mute:     #94a3b8;   /* Secondary/muted text */
  --text-faint:    #475569;   /* Disabled, placeholder */
  --text-invert:   #0f172a;   /* Text on light surfaces */
  --text-link:     #818cf8;   /* Hyperlinks */
  --text-link-hover: #a5b4fc; /* Hyperlink hover */
  --text-code:     #e2e8f0;   /* Inline code */
  --text-heading:  #f8fafc;   /* Heading text */
  --text-accent:   var(--accent-primary); /* Accent text */
  --text-error:    #fca5a5;   /* Error messages */
  --text-success:  #86efac;   /* Success messages */
  --text-warning:  #fcd34d;   /* Warning messages */
}


/* ─────────────────────────────────────────────────────────────
   5. Border
   ───────────────────────────────────────────────────────────── */

:root {
  --border-faint:   rgba(255, 255, 255, 0.04);
  --border-subtle:  rgba(255, 255, 255, 0.08);
  --border-normal:  rgba(255, 255, 255, 0.12);
  --border-heavy:   rgba(255, 255, 255, 0.20);
  --border-accent:  var(--accent-primary-border);
  --border-focus:   var(--accent-primary);
  --border-error:   rgba(239, 68, 68, 0.5);
  --border-success: rgba(34, 197, 94, 0.4);
  --border-warning: rgba(245, 158, 11, 0.4);
}


/* ─────────────────────────────────────────────────────────────
   6. Intent (semantic colours — used by callouts, cards, charts)
   ───────────────────────────────────────────────────────────── */

:root {
  /* Primary */
  --intent-primary:        #6366f1;
  --intent-primary-bg:     rgba(99, 102, 241, 0.10);
  --intent-primary-border: rgba(99, 102, 241, 0.30);
  --intent-primary-text:   #a5b4fc;

  /* Success */
  --intent-success:        #22c55e;
  --intent-success-bg:     rgba(34, 197, 94, 0.10);
  --intent-success-border: rgba(34, 197, 94, 0.30);
  --intent-success-text:   #86efac;

  /* Warning */
  --intent-warning:        #f59e0b;
  --intent-warning-bg:     rgba(245, 158, 11, 0.10);
  --intent-warning-border: rgba(245, 158, 11, 0.30);
  --intent-warning-text:   #fcd34d;

  /* Danger */
  --intent-danger:         #ef4444;
  --intent-danger-bg:      rgba(239, 68, 68, 0.10);
  --intent-danger-border:  rgba(239, 68, 68, 0.30);
  --intent-danger-text:    #fca5a5;

  /* Info */
  --intent-info:           #0ea5e9;
  --intent-info-bg:        rgba(14, 165, 233, 0.10);
  --intent-info-border:    rgba(14, 165, 233, 0.30);
  --intent-info-text:      #7dd3fc;

  /* Neutral */
  --intent-neutral:        #64748b;
  --intent-neutral-bg:     rgba(100, 116, 139, 0.10);
  --intent-neutral-border: rgba(100, 116, 139, 0.30);
  --intent-neutral-text:   #94a3b8;
}


/* ─────────────────────────────────────────────────────────────
   7. Syntax Highlighting (code blocks via Prism.js + overrides)
   ───────────────────────────────────────────────────────────── */

:root {
  --syntax-bg:          #0f0f18;
  --syntax-text:        #e2e8f0;
  --syntax-comment:     #64748b;
  --syntax-keyword:     #818cf8;
  --syntax-string:      #86efac;
  --syntax-number:      #fcd34d;
  --syntax-function:    #7dd3fc;
  --syntax-class:       #f9a8d4;
  --syntax-operator:    #f1f5f9;
  --syntax-punctuation: #94a3b8;
  --syntax-property:    #a5b4fc;
  --syntax-constant:    #fca5a5;
  --syntax-variable:    #e2e8f0;
  --syntax-tag:         #818cf8;
  --syntax-attr:        #fcd34d;
  --syntax-line-hl:     rgba(99, 102, 241, 0.12); /* Highlighted line */
  --syntax-line-add:    rgba(34, 197, 94,  0.10); /* Diff add */
  --syntax-line-del:    rgba(239, 68, 68,  0.10); /* Diff delete */
}


/* ─────────────────────────────────────────────────────────────
   8. Typography
   ───────────────────────────────────────────────────────────── */

:root {
  /* Font families */
  --font-sans:     "Inter Variable", "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-serif:    "Instrument Serif", "Georgia", "Times New Roman", serif;
  --font-mono:     "JetBrains Mono", "Fira Code", "Cascadia Code", "Consolas", "Menlo", monospace;
  --font-display:  "Instrument Serif", var(--font-serif);

  /* Font sizes (fluid type scale) */
  --text-xs:   0.75rem;    /* 12px */
  --text-sm:   0.8125rem;  /* 13px */
  --text-base: 0.9375rem;  /* 15px */
  --text-md:   1rem;       /* 16px */
  --text-lg:   1.125rem;   /* 18px */
  --text-xl:   1.25rem;    /* 20px */
  --text-2xl:  1.5rem;     /* 24px */
  --text-3xl:  1.875rem;   /* 30px */
  --text-4xl:  2.25rem;    /* 36px */
  --text-5xl:  3rem;       /* 48px */

  /* Line heights */
  --leading-none:    1;
  --leading-tight:   1.25;
  --leading-snug:    1.375;
  --leading-normal:  1.5;
  --leading-relaxed: 1.625;
  --leading-loose:   2;

  /* Letter spacing */
  --tracking-tight:   -0.04em;
  --tracking-snug:    -0.02em;
  --tracking-normal:   0em;
  --tracking-wide:     0.02em;
  --tracking-wider:    0.05em;
  --tracking-widest:   0.1em;

  /* Font weights */
  --weight-light:    300;
  --weight-normal:   400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-extrabold: 800;
  --weight-black:    900;

  /* Heading sizes (rendered document) */
  --heading-1: 2rem;       /* 32px */
  --heading-2: 1.5rem;     /* 24px */
  --heading-3: 1.25rem;    /* 20px */
  --heading-4: 1.125rem;   /* 18px */
  --heading-5: 1rem;       /* 16px */
  --heading-6: 0.875rem;   /* 14px */

  /* Paragraph / body text for rendered content */
  --prose-size:       var(--text-base);
  --prose-leading:    var(--leading-relaxed);
  --prose-measure:    72ch;   /* Max line length */
}


/* ─────────────────────────────────────────────────────────────
   9. Spacing (4px base grid)
   ───────────────────────────────────────────────────────────── */

:root {
  --space-0:   0;
  --space-px:  1px;
  --space-0-5: 0.125rem;  /* 2px  */
  --space-1:   0.25rem;   /* 4px  */
  --space-1-5: 0.375rem;  /* 6px  */
  --space-2:   0.5rem;    /* 8px  */
  --space-2-5: 0.625rem;  /* 10px */
  --space-3:   0.75rem;   /* 12px */
  --space-3-5: 0.875rem;  /* 14px */
  --space-4:   1rem;      /* 16px */
  --space-5:   1.25rem;   /* 20px */
  --space-6:   1.5rem;    /* 24px */
  --space-7:   1.75rem;   /* 28px */
  --space-8:   2rem;      /* 32px */
  --space-9:   2.25rem;   /* 36px */
  --space-10:  2.5rem;    /* 40px */
  --space-11:  2.75rem;   /* 44px */
  --space-12:  3rem;      /* 48px */
  --space-14:  3.5rem;    /* 56px */
  --space-16:  4rem;      /* 64px */
  --space-20:  5rem;      /* 80px */
  --space-24:  6rem;      /* 96px */
  --space-32:  8rem;      /* 128px */
  --space-40:  10rem;     /* 160px */
  --space-48:  12rem;     /* 192px */
  --space-64:  16rem;     /* 256px */
}


/* ─────────────────────────────────────────────────────────────
   10. Radius
   ───────────────────────────────────────────────────────────── */

:root {
  --radius-none:  0;
  --radius-sm:    4px;
  --radius-md:    8px;
  --radius-lg:    12px;
  --radius-xl:    16px;
  --radius-2xl:   20px;
  --radius-3xl:   24px;
  --radius-full:  9999px;
}


/* ─────────────────────────────────────────────────────────────
   11. Shadow
   ───────────────────────────────────────────────────────────── */

:root {
  --shadow-none: none;

  --shadow-xs:
    0 1px 2px rgba(0, 0, 0, 0.20);

  --shadow-sm:
    0 1px 3px  rgba(0, 0, 0, 0.25),
    0 1px 2px  rgba(0, 0, 0, 0.20);

  --shadow-md:
    0 4px 6px  rgba(0, 0, 0, 0.25),
    0 2px 4px  rgba(0, 0, 0, 0.20);

  --shadow-lg:
    0 10px 15px rgba(0, 0, 0, 0.30),
    0 4px  6px  rgba(0, 0, 0, 0.20);

  --shadow-xl:
    0 20px 25px rgba(0, 0, 0, 0.35),
    0 8px  10px rgba(0, 0, 0, 0.25);

  --shadow-2xl:
    0 25px 50px rgba(0, 0, 0, 0.50);

  --shadow-inset:
    inset 0 2px 4px rgba(0, 0, 0, 0.30);

  /* Coloured glow shadows */
  --shadow-glow-primary: 0 0 20px rgba(99, 102, 241, 0.40);
  --shadow-glow-success: 0 0 20px rgba(34, 197, 94,  0.30);
  --shadow-glow-danger:  0 0 20px rgba(239, 68, 68,  0.30);
  --shadow-glow-warning: 0 0 20px rgba(245, 158, 11, 0.30);

  /* Diagram node elevation */
  --shadow-node:
    0 2px 8px  rgba(0, 0, 0, 0.30),
    0 1px 3px  rgba(0, 0, 0, 0.20);

  --shadow-node-hover:
    0 4px 16px rgba(0, 0, 0, 0.40),
    0 2px 6px  rgba(0, 0, 0, 0.25);
}


/* ─────────────────────────────────────────────────────────────
   12. Transition & Animation
   ───────────────────────────────────────────────────────────── */

:root {
  /* Durations */
  --duration-instant:  0ms;
  --duration-fast:     100ms;
  --duration-normal:   200ms;
  --duration-slow:     320ms;
  --duration-slower:   480ms;
  --duration-slowest:  640ms;

  /* Easing functions */
  --ease-linear:  linear;
  --ease-in:      cubic-bezier(0.4, 0, 1, 1);
  --ease-out:     cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out:  cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-bounce:  cubic-bezier(0.68, -0.55, 0.27, 1.55);
  --ease-back:    cubic-bezier(0.36, 0.07, 0.19, 0.97);

  /* Common transition shorthand */
  --transition-fast:   all var(--duration-fast)   var(--ease-out);
  --transition-normal: all var(--duration-normal) var(--ease-out);
  --transition-slow:   all var(--duration-slow)   var(--ease-out);

  /* Specific property transitions */
  --transition-color:      color      var(--duration-fast)   var(--ease-out),
                           background var(--duration-fast)   var(--ease-out);
  --transition-border:     border     var(--duration-fast)   var(--ease-out);
  --transition-shadow:     box-shadow var(--duration-normal) var(--ease-out);
  --transition-opacity:    opacity    var(--duration-normal) var(--ease-out);
  --transition-transform:  transform  var(--duration-normal) var(--ease-out);
  --transition-size:       width      var(--duration-normal) var(--ease-out),
                           height     var(--duration-normal) var(--ease-out);
}


/* ─────────────────────────────────────────────────────────────
   13. Z-index Scale
   ───────────────────────────────────────────────────────────── */

:root {
  --z-base:       0;
  --z-raised:     10;     /* Cards, dropdowns trigger area */
  --z-dropdown:   100;    /* Dropdown menus */
  --z-sticky:     200;    /* Sticky headers */
  --z-topbar:     300;    /* Application top bar */
  --z-sidebar:    300;    /* Sidebar overlaps content on mobile */
  --z-overlay:    500;    /* Modal backdrops */
  --z-modal:      600;    /* Modal dialogs */
  --z-palette:    700;    /* Command palette */
  --z-toast:      800;    /* Toast notifications */
  --z-tooltip:    900;    /* Tooltips */
  --z-boot:       9999;   /* Boot screen */
}


/* ─────────────────────────────────────────────────────────────
   14. Layout — Workspace Dimensions
   ───────────────────────────────────────────────────────────── */

:root {
  --topbar-height:          44px;
  --sidebar-width:          240px;
  --sidebar-min-width:      180px;
  --sidebar-max-width:      400px;
  --sidebar-tab-width:      40px;

  --editor-min-width:       280px;
  --preview-min-width:      320px;

  --split-handle-width:     4px;
  --split-handle-hover-width: 8px;

  --toolbar-height:         36px;
  --statusbar-height:       22px;
  --preview-toolbar-height: 32px;

  /* Computed: content area = viewport minus fixed chrome */
  --content-height: calc(100dvh - var(--topbar-height));
}


/* ─────────────────────────────────────────────────────────────
   15. Editor
   ───────────────────────────────────────────────────────────── */

:root {
  --editor-font:            var(--font-mono);
  --editor-font-size:       14px;
  --editor-line-height:     1.75;
  --editor-padding-x:       var(--space-6);
  --editor-padding-y:       var(--space-5);
  --editor-bg:              var(--bg-canvas);
  --editor-text:            var(--text-main);
  --editor-caret:           var(--accent-primary);
  --editor-selection:       var(--bg-selection);
  --editor-line-hl:         rgba(255, 255, 255, 0.025); /* Current line */
  --editor-gutter-width:    48px;
  --editor-gutter-bg:       transparent;
  --editor-gutter-text:     var(--text-faint);

  /* Syntax colours used by syntax-highlighter.js inline spans */
  --editor-keyword:         #818cf8;
  --editor-directive:       #a78bfa;
  --editor-directive-close: #7c3aed;
  --editor-string:          #86efac;
  --editor-number:          #fcd34d;
  --editor-math:            #f9a8d4;
  --editor-comment:         #475569;
  --editor-heading:         #f8fafc;
  --editor-bold:            #f1f5f9;
  --editor-italic:          #cbd5e1;
  --editor-code:            #e2e8f0;
  --editor-link:            #7dd3fc;
  --editor-error:           #fca5a5;
}


/* ─────────────────────────────────────────────────────────────
   16. Preview (rendered document)
   ───────────────────────────────────────────────────────────── */

:root {
  --preview-bg:          var(--bg-canvas);
  --preview-padding-x:   var(--space-10);
  --preview-padding-y:   var(--space-8);
  --preview-max-width:   800px;

  /* Prose body */
  --preview-text:        var(--text-main);
  --preview-text-mute:   var(--text-mute);
  --preview-link:        var(--text-link);
  --preview-link-hover:  var(--text-link-hover);
  --preview-heading:     var(--text-heading);
  --preview-code-bg:     var(--bg-code);
  --preview-code-text:   var(--text-code);
  --preview-blockquote-border: var(--accent-primary);
  --preview-hr:          var(--border-normal);
  --preview-table-border: var(--border-subtle);
  --preview-table-header-bg: var(--bg-surface);
  --preview-table-stripe: rgba(255, 255, 255, 0.025);

  /* Gap between prose blocks */
  --prose-block-gap:     var(--space-5);
  --prose-heading-gap:   var(--space-3);
}


/* ─────────────────────────────────────────────────────────────
   17. Sidebar
   ───────────────────────────────────────────────────────────── */

:root {
  --sidebar-bg:          var(--bg-panel);
  --sidebar-border:      var(--border-subtle);
  --sidebar-text:        var(--text-mute);
  --sidebar-text-active: var(--text-main);
  --sidebar-hover-bg:    rgba(255, 255, 255, 0.04);
  --sidebar-active-bg:   rgba(255, 255, 255, 0.07);
  --sidebar-active-border: var(--accent-primary);
  --sidebar-icon-size:   16px;
  --sidebar-item-height: 32px;
  --sidebar-indent:      var(--space-4);
}


/* ─────────────────────────────────────────────────────────────
   18. Scrollbar (styled on top of reset.css baseline)
   ───────────────────────────────────────────────────────────── */

:root {
  --scrollbar-width:  6px;
  --scrollbar-track:  transparent;
  --scrollbar-thumb:  rgba(255, 255, 255, 0.12);
  --scrollbar-thumb-hover: rgba(255, 255, 255, 0.22);
}

/* Apply themed scrollbar tokens */
::-webkit-scrollbar {
  width:  var(--scrollbar-width);
  height: var(--scrollbar-width);
}

::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
}

::-webkit-scrollbar-thumb {
  background:    var(--scrollbar-thumb);
  border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
}

* {
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
  scrollbar-width: thin;
}


/* ─────────────────────────────────────────────────────────────
   19. Focus Ring
   ───────────────────────────────────────────────────────────── */

:root {
  --focus-ring-color:  var(--accent-primary);
  --focus-ring-width:  2px;
  --focus-ring-offset: 2px;
  --focus-ring:
    0 0 0 var(--focus-ring-offset) var(--bg-app),
    0 0 0 calc(var(--focus-ring-offset) + var(--focus-ring-width)) var(--focus-ring-color);
}

:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}


/* ─────────────────────────────────────────────────────────────
   20. Diagram Tokens
   ───────────────────────────────────────────────────────────── */

:root {
  /* Node default appearance */
  --diagram-node-bg:              var(--bg-surface);
  --diagram-node-border:          var(--border-normal);
  --diagram-node-text:            var(--text-main);
  --diagram-node-radius:          var(--radius-sm);
  --diagram-node-shadow:          var(--shadow-node);

  /* Node trait fills */
  --diagram-node-primary-fill:    var(--intent-primary-bg);
  --diagram-node-primary-stroke:  var(--intent-primary-border);
  --diagram-node-success-fill:    var(--intent-success-bg);
  --diagram-node-success-stroke:  var(--intent-success-border);
  --diagram-node-danger-fill:     var(--intent-danger-bg);
  --diagram-node-danger-stroke:   var(--intent-danger-border);
  --diagram-node-warning-fill:    var(--intent-warning-bg);
  --diagram-node-warning-stroke:  var(--intent-warning-border);
  --diagram-node-info-fill:       var(--intent-info-bg);
  --diagram-node-info-stroke:     var(--intent-info-border);

  /* Edge appearance */
  --diagram-edge-color:           var(--border-heavy);
  --diagram-edge-width:           1.5px;
  --diagram-arrow-color:          var(--border-heavy);

  /* Labels */
  --diagram-label-bg:             var(--bg-surface);
  --diagram-label-text:           var(--text-mute);
  --diagram-label-font-size:      12px;

  /* Canvas */
  --diagram-bg:                   var(--bg-canvas);
  --diagram-grid-color:           rgba(255, 255, 255, 0.03);
  --diagram-caption-text:         var(--text-mute);
  --diagram-caption-font-size:    var(--text-sm);
}


/* ─────────────────────────────────────────────────────────────
   21. Math Tokens
   ───────────────────────────────────────────────────────────── */

:root {
  --math-block-bg:         var(--bg-surface);
  --math-block-border:     var(--border-subtle);
  --math-block-padding:    var(--space-6) var(--space-8);
  --math-block-radius:     var(--radius-md);
  --math-title-text:       var(--text-mute);
  --math-title-font:       var(--font-sans);
  --math-title-size:       var(--text-sm);
  --math-number-text:      var(--text-faint);
  --math-number-font:      var(--font-mono);
  --math-inline-bg:        transparent;
  --math-inline-text:      var(--text-main);

  /* Plot */
  --math-plot-bg:          var(--bg-code);
  --math-plot-axis:        var(--border-normal);
  --math-plot-grid:        rgba(255, 255, 255, 0.04);
  --math-plot-curve-0:     var(--accent-primary);
  --math-plot-curve-1:     var(--intent-success);
  --math-plot-curve-2:     var(--intent-warning);
  --math-plot-curve-3:     var(--intent-danger);
  --math-plot-root:        var(--text-mute);
  --math-plot-axis-text:   var(--text-faint);
}


/* ─────────────────────────────────────────────────────────────
   22. Component-specific Tokens
   ───────────────────────────────────────────────────────────── */

:root {

  /* Card */
  --card-bg:          var(--bg-surface);
  --card-border:      var(--border-subtle);
  --card-radius:      var(--radius-lg);
  --card-padding:     var(--space-5);
  --card-shadow:      var(--shadow-sm);
  --card-hover-bg:    var(--bg-surface-2);
  --card-hover-shadow: var(--shadow-md);
  --card-title-text:  var(--text-heading);
  --card-body-text:   var(--text-main);

  /* Alert / Callout */
  --callout-radius:   var(--radius-md);
  --callout-padding:  var(--space-4) var(--space-5);
  --callout-icon-size: 1.1em;

  /* Tabs */
  --tabs-border:              var(--border-subtle);
  --tabs-tab-text:            var(--text-mute);
  --tabs-tab-active-text:     var(--text-main);
  --tabs-tab-active-border:   var(--accent-primary);
  --tabs-tab-hover-bg:        rgba(255, 255, 255, 0.04);
  --tabs-panel-padding:       var(--space-5);

  /* Accordion */
  --accordion-border:         var(--border-subtle);
  --accordion-radius:         var(--radius-md);
  --accordion-header-text:    var(--text-main);
  --accordion-header-bg:      transparent;
  --accordion-header-hover-bg: rgba(255, 255, 255, 0.04);
  --accordion-body-text:      var(--text-main);
  --accordion-icon-color:     var(--text-mute);

  /* Steps */
  --steps-marker-bg:          var(--accent-primary-subtle);
  --steps-marker-border:      var(--accent-primary-border);
  --steps-marker-text:        var(--accent-primary);
  --steps-connector:          var(--border-subtle);
  --steps-title-text:         var(--text-heading);
  --steps-body-text:          var(--text-main);

  /* Table */
  --table-header-bg:          var(--bg-surface);
  --table-header-text:        var(--text-heading);
  --table-border:             var(--border-subtle);
  --table-row-hover:          rgba(255, 255, 255, 0.025);
  --table-stripe:             rgba(255, 255, 255, 0.015);
  --table-body-text:          var(--text-main);

  /* Code block */
  --code-block-bg:            var(--bg-code);
  --code-block-border:        var(--border-subtle);
  --code-block-radius:        var(--radius-md);
  --code-block-header-bg:     rgba(255, 255, 255, 0.03);
  --code-block-lang-text:     var(--text-faint);
  --code-block-copy-text:     var(--text-mute);
  --code-block-copy-hover:    var(--text-main);

  /* Embed / figure */
  --embed-caption-text:       var(--text-mute);
  --embed-caption-size:       var(--text-sm);
  --embed-border:             var(--border-subtle);
  --embed-radius:             var(--radius-md);

  /* Footnotes */
  --footnote-border:          var(--border-subtle);
  --footnote-text:            var(--text-mute);
  --footnote-ref-text:        var(--accent-primary);
  --footnote-backref:         var(--text-faint);

  /* Presentation slides */
  --slide-bg:                 var(--bg-canvas);
  --slide-border:             var(--border-subtle);
  --slide-nav-bg:             rgba(0, 0, 0, 0.5);
  --slide-nav-text:           var(--text-mute);
  --slide-counter-text:       var(--text-faint);
  --slide-radius:             var(--radius-md);

  /* Command palette */
  --palette-bg:               var(--bg-surface);
  --palette-border:           var(--border-normal);
  --palette-shadow:           var(--shadow-2xl);
  --palette-input-text:       var(--text-main);
  --palette-placeholder:      var(--text-faint);
  --palette-item-text:        var(--text-mute);
  --palette-item-hover-bg:    rgba(255, 255, 255, 0.06);
  --palette-item-active-bg:   var(--accent-primary-subtle);
  --palette-item-active-text: var(--text-main);
  --palette-width:            560px;
  --palette-radius:           var(--radius-xl);

  /* Dropdown menus */
  --dropdown-bg:              var(--bg-dropdown);
  --dropdown-border:          var(--border-normal);
  --dropdown-shadow:          var(--shadow-lg);
  --dropdown-radius:          var(--radius-md);
  --dropdown-item-text:       var(--text-mute);
  --dropdown-item-hover-bg:   rgba(255, 255, 255, 0.06);
  --dropdown-item-hover-text: var(--text-main);
  --dropdown-sep:             var(--border-subtle);

  /* Tooltip */
  --tooltip-bg:               var(--bg-tooltip);
  --tooltip-text:             var(--text-main);
  --tooltip-shadow:           var(--shadow-lg);
  --tooltip-radius:           var(--radius-sm);
  --tooltip-padding:          var(--space-1-5) var(--space-3);
  --tooltip-font-size:        var(--text-sm);

  /* Toast */
  --toast-bg:                 var(--bg-surface-2);
  --toast-border:             var(--border-normal);
  --toast-shadow:             var(--shadow-xl);
  --toast-radius:             var(--radius-md);
  --toast-text:               var(--text-main);

  /* Toolbar buttons */
  --toolbar-btn-text:         var(--text-mute);
  --toolbar-btn-hover-bg:     rgba(255, 255, 255, 0.06);
  --toolbar-btn-hover-text:   var(--text-main);
  --toolbar-btn-active-bg:    var(--accent-primary-subtle);
  --toolbar-btn-active-text:  var(--accent-primary);
  --toolbar-btn-radius:       var(--radius-sm);
  --toolbar-btn-size:         28px;
  --toolbar-bg:               var(--bg-panel);
  --toolbar-border:           var(--border-subtle);

  /* Split handle */
  --split-handle-bg:          var(--border-faint);
  --split-handle-hover-bg:    var(--accent-primary);
  --split-handle-radius:      var(--radius-full);

  /* Topbar */
  --topbar-bg:                rgba(10, 10, 15, 0.92);
  --topbar-border:            var(--border-subtle);
  --topbar-backdrop-blur:     12px;
  --topbar-wordmark-text:     var(--text-heading);
  --topbar-wordmark-font:     var(--font-display);
}


/* ─────────────────────────────────────────────────────────────
   23. Dark theme baseline selection colour
   ───────────────────────────────────────────────────────────── */

::selection {
  background: var(--bg-selection);
  color: inherit;
}


/* ─────────────────────────────────────────────────────────────
   24. Scrollbar — themed values applied
   (replaces the temporary values set in reset.css)
   ───────────────────────────────────────────────────────────── */

::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
}