/* ========================================================================= Sound to Vision — themes, shared by the main app (index.php) and the Reactive Editor (asset_editor/index.php). ------------------------------------------------------------------------- Every themed colour comes from a --t-* variable, so a theme is just one block of values. The active theme is , chosen from the theme menu in either toolbar and remembered in localStorage ('stovTheme'), so both pages always show the same theme. To add a theme: 1. copy one of the blocks below, rename it html[data-theme="yourname"] and change the values; 2. add a palette with the same name to asset_editor/javascript/ColorMap/colorMap.js (the node colours); 3. add it to STOV_THEMES in external/themes.js. Styles that use these variables: asset_editor/style.css (editor), external/theme-app.css (main app) and documentation/index.php (docs). ========================================================================= */ :root { /* Shared by all themes */ --t-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --sp-width: 380px; /* left panel width */ --sp-rail: 40px; /* left panel collapsed width */ } /* ---- Dark -------------------------------------------------------------- */ html[data-theme="dark"] { --t-panel-bg: rgba(30, 30, 30, 0.8); --t-panel-filter: blur(10px) saturate(1.1); --t-panel-edge: rgba(255, 255, 255, 0.12); --t-header-bg: rgba(30, 30, 30, 0.75); --t-header-filter: blur(10px); --t-bar-bg: rgba(30, 30, 30, 0.94); --t-ai-bg: rgba(30, 30, 30, 0.94); --t-bar-filter: blur(8px); --t-bar-edge: #444444; --t-ai-header-bg: rgb(30, 30, 30); --t-ai-shadow: -8px 8px 24px rgba(0, 0, 0, 0.4); --t-drawer-shadow: 8px 0 24px rgba(0, 0, 0, 0.45); --t-text: #cccccc; --t-text-dim: #8a8a8a; --t-text-strong: #ffffff; --t-line: #333333; --t-hover-text: #F0BC22; --t-surface: #2c2c2c; --t-surface-hi: #3a3a3a; --t-btn-border: #3a3a3a; --t-btn-hover-border: #555555; --t-btn-active-border: #2f9e5b; --t-bar-btn-active-border: #555555; --t-open-underline: #2f9e5b; --t-field-bg: #2c2c2c; --t-field-hover-bg: #3a3a3a; --t-field-focus-bg: #2c2c2c; --t-field-text: #ffffff; --t-field-border: #000000; --t-field-focus-border: #000000; --t-field-placeholder: #8a8a8a; --t-field-scheme: dark; --t-select-arrow: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23dee2e6' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); --t-focus-ring: 0 0 0 2px #F0BC22; --t-log-text: #cccccc; --t-check-off-bg: #3a3a3a; --t-check-off-border: #555555; --t-check-focus-border: #F0BC22; --t-check-focus-ring: 0 0 0 2px rgba(240, 188, 34, 0.35); --t-switch-knob: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23cccccc'/%3e%3c/svg%3e"); --t-accent: #2f9e5b; --t-accent-hi: #3ab86b; --t-accent-text: #ffffff; --t-ai-accent: #3ab86b; --t-progress-track: #3a3a3a; --t-menu-bg: #262626; --t-menu-border: #444444; --t-menu-text: #cccccc; --t-menu-hover-bg: #3a3a3a; --t-menu-hover-text: #F0BC22; --t-menu-active-bg: #3a3a3a; --t-menu-active-text: #ffffff; --t-menu-header: #8a8a8a; --t-msg-user-bg: #3a3a3a; --t-msg-user-text: #ffffff; --t-msg-user-border: none; --t-msg-ai-bg: #2c2c2c; --t-msg-ai-text: #cccccc; --t-file-bg: rgb(30, 30, 30); --t-file-border: #444444; --t-file-text: #cccccc; --t-ai-field-hover-bg: #2c2c2c; --t-ai-field-focus-bg: #2c2c2c; --t-ai-field-hover-border: #555555; --t-ai-focus-border: #F0BC22; --t-ai-input-ring: 0 0 0 1px #F0BC22; --t-ai-select-ring: none; --t-option-bg: #2c2c2c; --t-option-text: #ffffff; --t-thumb-border: #444444; --t-scroll-color: #555555; --t-scroll-thumb: #4a4a4a; --t-scroll-thumb-hover: #5a5a5a; --t-page-scroll: #4a4a4a; --t-page-scroll-hover: #5a5a5a; --bp-paper: #151b23; /* dark slate */ --bp-major: rgba(205, 212, 220, 0.20); --bp-minor: rgba(205, 212, 220, 0.06); /* Main app (index.php) */ --t-on-paper: #cccccc; /* text sitting straight on the page */ --t-bar-label: #8a8a8a; /* section labels in the top toolbar */ --t-logo-filter: none; /* the white logo; invert(1) makes it black */ --t-header-text: #ffffff; /* titles on --t-header-bg (panel header strips) */ --t-range-track: #4a4a4a; /* slider track (form-range) */ --t-mode-interp: #3ab86b; /* interpolation (animation-mode icons and controls) */ --t-mode-signal: #4dabf7; /* driven by a signal */ --t-mode-trigger: #F0BC22; /* triggered */ --t-mode-off: #8a8a8a; /* no animation */ /* Timeline (WaveformGraphic.js, AudioGraphic.js) */ --t-tl-bg: #232323; /* track area */ --t-tl-video: #5fa89b; /* asset blocks, by type */ --t-tl-reactive: #d9941a; --t-tl-text: #c98f90; --t-tl-photo: #c4507a; --t-tl-svg: #6f9a55; --t-tl-stack: #8a8671; --t-tl-midi: #4d86c9; --t-tl-audio: #4fa9ad; --t-tl-stroke: rgba(255, 255, 255, 0.35); /* block outline */ --t-tl-selected: #3ab86b; /* block in focus */ --t-tl-selected-stroke: #ffffff; /* its outline */ --t-tl-handle: #cccccc; /* resize handles */ --t-tl-playhead: #F0BC22; /* play position */ --t-tl-wave-bg: #151515; /* behind audio waveforms */ --t-tl-mix: #8fb8e8; /* Signal Mix waveform on the audio lane */ /* Documentation (documentation/index.php maps its --stov-* tokens onto these) */ --t-doc-paper: #1e1e1e; /* page background */ --t-doc-surface: #2c2c2c; /* cards, table headers, code */ --t-doc-surface-hover: #3a3a3a; /* raised hover state */ --t-doc-ink: #e6e6e6; /* body text and headings */ --t-doc-slate: #8a8a8a; /* secondary text */ --t-doc-line: #333333; /* rules and borders */ --t-doc-accent: #3ab86b; /* links, tags, active nav, buttons */ --t-doc-signal: #F0BC22; /* highlights (dots, ticks) */ } /* ---- Minimal: flat, no blur or shadows, hairline edges, black accent ---- */ html[data-theme="minimal"] { --t-panel-bg: #dee2e6; /* grey (gray-300) */ --t-panel-filter: none; --t-panel-edge: #dee2e6; --t-header-bg: #dee2e6; --t-header-filter: none; --t-bar-bg: #dee2e6; /* toolbar matches the panel */ --t-ai-bg: #ffffff; --t-bar-filter: none; --t-bar-edge: #dee2e6; --t-ai-header-bg: #ffffff; --t-ai-shadow: none; --t-drawer-shadow: none; --t-text: #212529; --t-text-dim: #6c757d; --t-text-strong: #000000; --t-line: #c4c9ce; /* dividers, visible on the grey panel */ --t-hover-text: #000000; --t-surface: #ffffff; --t-surface-hi: #f8f9fa; --t-btn-border: #dee2e6; --t-btn-hover-border: #adb5bd; --t-btn-active-border: #212529; --t-bar-btn-active-border: #212529; --t-open-underline: #212529; --t-field-bg: #f8f9fa; --t-field-hover-bg: #f1f3f5; --t-field-focus-bg: #ffffff; --t-field-text: #212529; --t-field-border: #ced4da; --t-field-focus-border: #212529; --t-field-placeholder: #adb5bd; --t-field-scheme: light; --t-select-arrow: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23495057' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); --t-focus-ring: 0 0 0 1px #212529; --t-log-text: #212529; --t-check-off-bg: #ffffff; --t-check-off-border: #adb5bd; --t-check-focus-border: #212529; --t-check-focus-ring: 0 0 0 2px rgba(33, 37, 41, 0.15); --t-switch-knob: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23adb5bd'/%3e%3c/svg%3e"); --t-accent: #212529; --t-accent-hi: #495057; --t-accent-text: #ffffff; --t-ai-accent: #212529; --t-progress-track: #bfc5cb; --t-menu-bg: #ffffff; --t-menu-border: #dee2e6; --t-menu-text: #212529; --t-menu-hover-bg: #f8f9fa; --t-menu-hover-text: #000000; --t-menu-active-bg: #f1f3f5; --t-menu-active-text: #000000; --t-menu-header: #6c757d; --t-msg-user-bg: #f8f9fa; --t-msg-user-text: #212529; --t-msg-user-border: 1px solid #e9ecef; --t-msg-ai-bg: #ffffff; --t-msg-ai-text: #212529; --t-file-bg: #f8f9fa; --t-file-border: #dee2e6; --t-file-text: #212529; --t-ai-field-hover-bg: #f1f3f5; --t-ai-field-focus-bg: #ffffff; --t-ai-field-hover-border: #adb5bd; --t-ai-focus-border: #212529; --t-ai-input-ring: 0 0 0 1px #212529; --t-ai-select-ring: 0 0 0 1px #212529; --t-option-bg: #ffffff; --t-option-text: #212529; --t-thumb-border: #dee2e6; --t-scroll-color: #adb5bd; --t-scroll-thumb: #adb5bd; --t-scroll-thumb-hover: #868e96; --t-page-scroll: #ced4da; --t-page-scroll-hover: #adb5bd; --bp-paper: #adb5bd; /* plain grid (gray-500): faint major lines only */ --bp-major: rgba(0, 0, 0, 0.12); --bp-minor: transparent; /* Main app (index.php) */ --t-on-paper: #212529; /* text sitting straight on the page */ --t-bar-label: #6c757d; /* section labels in the top toolbar */ --t-logo-filter: invert(1); /* the white logo; invert(1) makes it black */ --t-header-text: #000000; /* titles on --t-header-bg (panel header strips) */ --t-range-track: #adb5bd; /* slider track (form-range) */ --t-mode-interp: #37744a; /* interpolation (animation-mode icons and controls) */ --t-mode-signal: #33658a; /* driven by a signal */ --t-mode-trigger: #9a6700; /* triggered */ --t-mode-off: #adb5bd; /* no animation */ /* Timeline (WaveformGraphic.js, AudioGraphic.js) */ --t-tl-bg: #f1f3f5; /* track area */ --t-tl-video: #ced4da; /* asset blocks, by type */ --t-tl-reactive: #adb5bd; --t-tl-text: #e9ecef; --t-tl-photo: #dee2e6; --t-tl-svg: #c2c8ce; --t-tl-stack: #868e96; --t-tl-midi: #6c757d; --t-tl-audio: #b5bcc3; --t-tl-stroke: #868e96; /* block outline */ --t-tl-selected: #212529; /* block in focus */ --t-tl-selected-stroke: #212529; /* its outline */ --t-tl-handle: #212529; /* resize handles */ --t-tl-playhead: #212529; /* play position */ --t-tl-wave-bg: #495057; /* behind audio waveforms */ --t-tl-mix: #1d3558; /* Signal Mix waveform on the audio lane */ /* Documentation (documentation/index.php maps its --stov-* tokens onto these) */ --t-doc-paper: #ffffff; /* page background */ --t-doc-surface: #f1f3f5; /* cards, table headers, code */ --t-doc-surface-hover: #f8f9fa; /* raised hover state */ --t-doc-ink: #212529; /* body text and headings */ --t-doc-slate: #6c757d; /* secondary text */ --t-doc-line: #dee2e6; /* rules and borders */ --t-doc-accent: #212529; /* links, tags, active nav, buttons */ --t-doc-signal: #495057; /* highlights (dots, ticks) */ } /* ---- Light (default): Okabe–Ito colours, readable with colour blindness --- Nothing relies on red vs green: the accent is blue, focus is a thick black ring, and a hovered node's outline gets thicker as well as changing colour. (Formerly "Colour-safe".) */ :root, html[data-theme="light"] { --t-panel-bg: #f2f2f2; --t-panel-filter: none; --t-panel-edge: #bdbdbd; --t-header-bg: #f2f2f2; --t-header-filter: none; --t-bar-bg: #f2f2f2; --t-ai-bg: #ffffff; --t-bar-filter: none; --t-bar-edge: #bdbdbd; --t-ai-header-bg: #f2f2f2; --t-ai-shadow: -8px 8px 24px rgba(0, 0, 0, 0.25); --t-drawer-shadow: 8px 0 24px rgba(0, 0, 0, 0.3); --t-text: #000000; --t-text-dim: #404040; --t-text-strong: #000000; --t-line: #bdbdbd; --t-hover-text: #000000; --t-surface: #ffffff; --t-surface-hi: #e6e6e6; --t-btn-border: #595959; --t-btn-hover-border: #000000; --t-btn-active-border: #0072B2; --t-bar-btn-active-border: #0072B2; --t-open-underline: #0072B2; --t-field-bg: #ffffff; --t-field-hover-bg: #f2f2f2; --t-field-focus-bg: #ffffff; --t-field-text: #000000; --t-field-border: #595959; --t-field-focus-border: #000000; --t-field-placeholder: #595959; --t-field-scheme: light; --t-select-arrow: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23000000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); --t-focus-ring: 0 0 0 2px #000000; --t-log-text: #000000; --t-check-off-bg: #ffffff; --t-check-off-border: #595959; --t-check-focus-border: #000000; --t-check-focus-ring: 0 0 0 2px #000000; --t-switch-knob: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23595959'/%3e%3c/svg%3e"); --t-accent: #0072B2; /* Okabe–Ito blue */ --t-accent-hi: #005a8c; --t-accent-text: #ffffff; --t-ai-accent: #0072B2; --t-progress-track: #bdbdbd; --t-menu-bg: #ffffff; --t-menu-border: #595959; --t-menu-text: #000000; --t-menu-hover-bg: #e6e6e6; --t-menu-hover-text: #000000; --t-menu-active-bg: #d9d9d9; --t-menu-active-text: #000000; --t-menu-header: #404040; --t-msg-user-bg: #e6e6e6; --t-msg-user-text: #000000; --t-msg-user-border: 1px solid #bdbdbd; --t-msg-ai-bg: #ffffff; --t-msg-ai-text: #000000; --t-file-bg: #f2f2f2; --t-file-border: #595959; --t-file-text: #000000; --t-ai-field-hover-bg: #f2f2f2; --t-ai-field-focus-bg: #ffffff; --t-ai-field-hover-border: #000000; --t-ai-focus-border: #000000; --t-ai-input-ring: 0 0 0 2px #000000; --t-ai-select-ring: 0 0 0 2px #000000; --t-option-bg: #ffffff; --t-option-text: #000000; --t-thumb-border: #595959; --t-scroll-color: #8c8c8c; --t-scroll-thumb: #8c8c8c; --t-scroll-thumb-hover: #595959; --t-page-scroll: #8c8c8c; --t-page-scroll-hover: #595959; --bp-paper: #e0e0e0; /* neutral grey, so no wire colour gets lost */ --bp-major: rgba(0, 0, 0, 0.14); --bp-minor: rgba(0, 0, 0, 0.05); /* Main app (index.php) */ --t-on-paper: #000000; /* text sitting straight on the page */ --t-bar-label: #404040; /* section labels in the top toolbar */ --t-logo-filter: invert(1); /* the white logo; invert(1) makes it black */ --t-header-text: #000000; /* titles on --t-header-bg (panel header strips) */ --t-range-track: #8c8c8c; /* slider track (form-range) */ --t-mode-interp: #009E73; /* interpolation (animation-mode icons and controls) */ --t-mode-signal: #0072B2; /* driven by a signal */ --t-mode-trigger: #D55E00; /* triggered */ --t-mode-off: #595959; /* no animation */ /* Timeline (WaveformGraphic.js, AudioGraphic.js) */ --t-tl-bg: #ffffff; /* track area */ --t-tl-video: #56B4E9; /* asset blocks, by type */ --t-tl-reactive: #E69F00; --t-tl-text: #F0E442; --t-tl-photo: #CC79A7; --t-tl-svg: #009E73; --t-tl-stack: #999999; --t-tl-midi: #0072B2; --t-tl-audio: #D55E00; --t-tl-stroke: #000000; /* block outline */ --t-tl-selected: #00ff00; /* block in focus */ --t-tl-selected-stroke: #000000; /* its outline */ --t-tl-handle: #000000; /* resize handles */ --t-tl-playhead: #000000; /* play position */ --t-tl-wave-bg: #333333; /* behind audio waveforms */ --t-tl-mix: #1d3558; /* Signal Mix waveform on the audio lane */ /* Documentation (documentation/index.php maps its --stov-* tokens onto these) */ --t-doc-paper: #ffffff; /* page background */ --t-doc-surface: #f2f2f2; /* cards, table headers, code */ --t-doc-surface-hover: #e6e6e6; /* raised hover state */ --t-doc-ink: #000000; /* body text and headings */ --t-doc-slate: #404040; /* secondary text */ --t-doc-line: #bdbdbd; /* rules and borders */ --t-doc-accent: #0072B2; /* links, tags, active nav, buttons */ --t-doc-signal: #009E73; /* highlights (dots, ticks) */ } /* ---- Marine: marine blue, white and cool greys ---------------------------- */ html[data-theme="marine"] { --t-panel-bg: #f7f9fb; --t-panel-filter: none; --t-panel-edge: #c9d3dd; --t-header-bg: #0b3a5b; /* marine band across the top */ --t-header-filter: none; --t-bar-bg: #0b3a5b; --t-ai-bg: #ffffff; --t-bar-filter: none; --t-bar-edge: #0b3a5b; --t-ai-header-bg: #eef2f6; --t-ai-shadow: -8px 8px 24px rgba(11, 58, 91, 0.25); --t-drawer-shadow: 8px 0 24px rgba(11, 58, 91, 0.3); --t-text: #1f2d3a; --t-text-dim: #5b6b7a; --t-text-strong: #0b3a5b; /* marine headings */ --t-line: #d5dde5; --t-hover-text: #0b3a5b; --t-surface: #ffffff; --t-surface-hi: #eef3f7; --t-btn-border: #c3cdd7; --t-btn-hover-border: #0b3a5b; --t-btn-active-border: #0b3a5b; --t-bar-btn-active-border: #0b3a5b; --t-open-underline: #0b3a5b; --t-field-bg: #f2f5f8; --t-field-hover-bg: #e9eef3; --t-field-focus-bg: #ffffff; --t-field-text: #1f2d3a; --t-field-border: #b8c4cf; --t-field-focus-border: #0b3a5b; --t-field-placeholder: #8796a5; --t-field-scheme: light; --t-select-arrow: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%230b3a5b' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); --t-focus-ring: 0 0 0 2px rgba(11, 58, 91, 0.25); --t-log-text: #1f2d3a; --t-check-off-bg: #ffffff; --t-check-off-border: #8796a5; --t-check-focus-border: #0b3a5b; --t-check-focus-ring: 0 0 0 2px rgba(11, 58, 91, 0.25); --t-switch-knob: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%238796a5'/%3e%3c/svg%3e"); --t-accent: #0b3a5b; --t-accent-hi: #145a8d; --t-accent-text: #ffffff; --t-ai-accent: #145a8d; --t-progress-track: #d5dde5; --t-menu-bg: #ffffff; --t-menu-border: #c3cdd7; --t-menu-text: #1f2d3a; --t-menu-hover-bg: #eef3f7; --t-menu-hover-text: #0b3a5b; --t-menu-active-bg: #dde6ee; --t-menu-active-text: #0b3a5b; --t-menu-header: #5b6b7a; --t-msg-user-bg: #0b3a5b; --t-msg-user-text: #ffffff; --t-msg-user-border: none; --t-msg-ai-bg: #eef2f6; --t-msg-ai-text: #1f2d3a; --t-file-bg: #ffffff; --t-file-border: #c3cdd7; --t-file-text: #1f2d3a; --t-ai-field-hover-bg: #e9eef3; --t-ai-field-focus-bg: #ffffff; --t-ai-field-hover-border: #0b3a5b; --t-ai-focus-border: #0b3a5b; --t-ai-input-ring: 0 0 0 2px rgba(11, 58, 91, 0.25); --t-ai-select-ring: 0 0 0 2px rgba(11, 58, 91, 0.25); --t-option-bg: #ffffff; --t-option-text: #1f2d3a; --t-thumb-border: #c3cdd7; --t-scroll-color: #b8c4cf; --t-scroll-thumb: #b8c4cf; --t-scroll-thumb-hover: #8796a5; --t-page-scroll: #b8c4cf; --t-page-scroll-hover: #8796a5; --bp-paper: #163c68; /* editor grid: blueprint */ --bp-major: rgba(200, 225, 255, 0.38); --bp-minor: rgba(170, 210, 255, 0.13); /* Main app (index.php) */ --t-page-bg: #e8edf2; /* page behind the stage (default: --bp-paper) */ --t-on-paper: #1f2d3a; /* text sitting straight on the page */ --t-bar-label: rgba(255, 255, 255, 0.75); /* section labels in the top toolbar */ --t-logo-filter: none; /* the white logo; invert(1) makes it black */ --t-header-text: #ffffff; /* titles on --t-header-bg (panel header strips) */ --t-range-track: #b8c4cf; /* slider track (form-range) */ --t-mode-interp: #1f7a8c; /* interpolation (animation-mode icons and controls) */ --t-mode-signal: #0b3a5b; /* driven by a signal */ --t-mode-trigger: #b86e1e; /* triggered */ --t-mode-off: #8796a5; /* no animation */ /* Timeline (WaveformGraphic.js, AudioGraphic.js) */ --t-tl-bg: #ffffff; /* track area */ --t-tl-video: #9cc3d5; /* asset blocks, by type */ --t-tl-reactive: #e0a458; --t-tl-text: #c9d6e3; --t-tl-photo: #d99aa5; --t-tl-svg: #7fb09a; --t-tl-stack: #5b6b7a; --t-tl-midi: #0b3a5b; --t-tl-audio: #6aa9c9; --t-tl-stroke: #0b3a5b; /* block outline */ --t-tl-selected: #1f7a8c; /* block in focus */ --t-tl-selected-stroke: #0b3a5b; /* its outline */ --t-tl-handle: #0b3a5b; /* resize handles */ --t-tl-playhead: #c0392b; /* play position */ --t-tl-wave-bg: #0b3a5b; /* behind audio waveforms */ --t-tl-mix: #0b3a5b; /* Signal Mix waveform on the audio lane */ /* Documentation (documentation/index.php maps its --stov-* tokens onto these) */ --t-doc-paper: #f7f9fb; /* page background */ --t-doc-surface: #ffffff; /* cards, table headers, code */ --t-doc-surface-hover: #eef3f7; /* raised hover state */ --t-doc-ink: #1f2d3a; /* body text and headings */ --t-doc-slate: #5b6b7a; /* secondary text */ --t-doc-line: #d5dde5; /* rules and borders */ --t-doc-accent: #0b3a5b; /* links, tags, active nav, buttons */ --t-doc-signal: #1f7a8c; /* highlights (dots, ticks) */ }