/* =========================================================================
   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 <html data-theme="...">, 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-thumb-filter: brightness(0.6) saturate(0.85);   /* asset thumbnails dimmed (darkened on a dark page), full on hover */
    --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: #9a9a9a;
    --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 */

    /* Stage overlays, drawn by the desktop renderer (theme-native.js sends them) */
    --t-stage-outline: #4a4a4a;                 /* the stage / page edge */
    --t-stage-shape: #808080;                   /* other boxes (shapes, text) */
    --t-stage-select: #3ab86b;                  /* the selected asset: its box and 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-thumb-filter: none;                         /* asset thumbnails at full clarity (only dark themes dim them) */
    --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 */

    /* Stage overlays, drawn by the desktop renderer (theme-native.js sends them) */
    --t-stage-outline: #b0b0b0;                 /* the stage / page edge */
    --t-stage-shape: #6c757d;                   /* other boxes (shapes, text) */
    --t-stage-select: #212529;                  /* the selected asset: its box and 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-thumb-filter: none;                         /* asset thumbnails at full clarity (only dark themes dim them) */
    --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: #d3d7db;
    --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 */

    /* Stage overlays, drawn by the desktop renderer (theme-native.js sends them) */
    --t-stage-outline: #9e9e9e;                 /* the stage / page edge */
    --t-stage-shape: #6e6e6e;                   /* other boxes (shapes, text) */
    --t-stage-select: #0072b2;                  /* the selected asset: its box and 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-thumb-filter: none;                         /* asset thumbnails at full clarity (only dark themes dim them) */
    --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: #c9d1d8;
    --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 */

    /* Stage overlays, drawn by the desktop renderer (theme-native.js sends them) */
    --t-stage-outline: #8aa4bd;                 /* the stage / page edge */
    --t-stage-shape: #5b7a99;                   /* other boxes (shapes, text) */
    --t-stage-select: #0b3a5b;                  /* the selected asset: its box and 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) */
}

/* ---- Jet Black: black throughout, grey text, no blur or glow; white is the
   one highlight (accents, focus, the playhead). Colours that carry meaning
   (signal / trigger / animation modes, asset types on the timeline) are kept,
   muted. ---- */
html[data-theme="jetblack"] {
    --t-panel-bg: #000000;
    --t-panel-filter: none;
    --t-panel-edge: #1c1c1c;
    --t-header-bg: #000000;
    --t-header-filter: none;
    --t-bar-bg: #000000;
    --t-ai-bg: #050505;
    --t-bar-filter: none;
    --t-bar-edge: #1c1c1c;
    --t-ai-header-bg: #000000;
    --t-ai-shadow: -8px 8px 24px rgba(0, 0, 0, 0.6);
    --t-drawer-shadow: 8px 0 24px rgba(0, 0, 0, 0.6);

    --t-text: #b3b3b3;
    --t-text-dim: #6e6e6e;
    --t-text-strong: #f2f2f2;
    --t-line: #1c1c1c;
    --t-hover-text: #ffffff;

    --t-surface: #0d0d0d;
    --t-surface-hi: #1a1a1a;
    --t-btn-border: #262626;
    --t-btn-hover-border: #4d4d4d;
    --t-btn-active-border: #d9d9d9;
    --t-bar-btn-active-border: #4d4d4d;
    --t-open-underline: #d9d9d9;

    --t-field-bg: #0a0a0a;
    --t-field-hover-bg: #141414;
    --t-field-focus-bg: #0a0a0a;
    --t-field-text: #f2f2f2;
    --t-field-border: #262626;
    --t-field-focus-border: #8c8c8c;
    --t-field-placeholder: #6e6e6e;
    --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='%23b3b3b3' 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 #8c8c8c;
    --t-log-text: #b3b3b3;

    --t-check-off-bg: #141414;
    --t-check-off-border: #333333;
    --t-check-focus-border: #8c8c8c;
    --t-check-focus-ring: 0 0 0 2px rgba(255, 255, 255, 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='%23b3b3b3'/%3e%3c/svg%3e");

    --t-accent: #e6e6e6;                             /* the one highlight: white, black text */
    --t-accent-hi: #ffffff;
    --t-accent-text: #000000;
    --t-ai-accent: #e6e6e6;
    --t-progress-track: #1a1a1a;

    --t-menu-bg: #050505;
    --t-menu-border: #262626;
    --t-menu-text: #b3b3b3;
    --t-menu-hover-bg: #141414;
    --t-menu-hover-text: #ffffff;
    --t-menu-active-bg: #1a1a1a;
    --t-menu-active-text: #ffffff;
    --t-menu-header: #6e6e6e;

    --t-msg-user-bg: #141414;
    --t-msg-user-text: #f2f2f2;
    --t-msg-user-border: none;
    --t-msg-ai-bg: #0a0a0a;
    --t-msg-ai-text: #b3b3b3;
    --t-file-bg: #050505;
    --t-file-border: #262626;
    --t-file-text: #b3b3b3;
    --t-ai-field-hover-bg: #0a0a0a;
    --t-ai-field-focus-bg: #0a0a0a;
    --t-ai-field-hover-border: #4d4d4d;
    --t-ai-focus-border: #8c8c8c;
    --t-ai-input-ring: 0 0 0 1px #8c8c8c;
    --t-ai-select-ring: none;
    --t-option-bg: #0a0a0a;
    --t-option-text: #f2f2f2;

    --t-thumb-border: #262626;
    --t-thumb-filter: brightness(0.55) saturate(0.8);   /* asset thumbnails dimmed (full on hover) */
    --t-preview-filter: brightness(0.55) saturate(0.8); /* and the asset preview in the properties panel (only here) */
    --t-scroll-color: #333333;
    --t-scroll-thumb: #262626;
    --t-scroll-thumb-hover: #3a3a3a;
    --t-page-scroll: #262626;
    --t-page-scroll-hover: #3a3a3a;

    --bp-paper: #000000;
    --bp-major: rgba(255, 255, 255, 0.08);
    --bp-minor: rgba(255, 255, 255, 0.03);

    /* Main app (index.php) */
    --t-on-paper: #b3b3b3;
    --t-bar-label: #6e6e6e;
    --t-logo-filter: none;
    --t-header-text: #f2f2f2;
    --t-range-track: #262626;
    --t-mode-interp: #5aa979;
    --t-mode-signal: #5b9bd5;
    --t-mode-trigger: #d4a72c;
    --t-mode-off: #6e6e6e;

    /* Timeline (WaveformGraphic.js, AudioGraphic.js) */
    --t-tl-bg: #050505;
    --t-tl-video: #3f6f67;
    --t-tl-reactive: #8f6a20;
    --t-tl-text: #8a6566;
    --t-tl-photo: #84435c;
    --t-tl-svg: #4f6b40;
    --t-tl-stack: #5e5c50;
    --t-tl-midi: #3f628f;
    --t-tl-audio: #5c5c5c;
    --t-tl-stroke: rgba(255, 255, 255, 0.18);
    --t-tl-selected: #8c8c8c;
    --t-tl-selected-stroke: #ffffff;
    --t-tl-handle: #b3b3b3;

    /* Stage overlays, drawn by the desktop renderer (theme-native.js sends them) */
    --t-stage-outline: #333333;                 /* the stage / page edge */
    --t-stage-shape: #6e6e6e;                   /* other boxes (shapes, text) */
    --t-stage-select: #e6e6e6;                  /* the selected asset: its box and handles */
    --t-tl-playhead: #ffffff;
    --t-tl-wave-bg: #000000;
    --t-tl-mix: #7d9cc0;

    /* Documentation (documentation/index.php maps its --stov-* tokens onto these) */
    --t-doc-paper: #000000;
    --t-doc-surface: #0d0d0d;
    --t-doc-surface-hover: #1a1a1a;
    --t-doc-ink: #d9d9d9;
    --t-doc-slate: #6e6e6e;
    --t-doc-line: #1c1c1c;
    --t-doc-accent: #e6e6e6;
    --t-doc-signal: #b3b3b3;
}

/* ---- Studio: warm light greys, a white toolbar with black buttons (black in
   the Reactive Editor); orange is the highlight (accents, focus, the playhead,
   important buttons). Buttons: black with white text in the toolbar, grey in
   the panels; red for Render / record, blue for
   secondary actions (theme-app.css, asset_editor/style.css).
     orange #f15a22   black #231f20   panels #d2d3d4   background #e4e3e0
     grey   #989fa6   red   #e52918   blue   #5394b5                     ---- */
html[data-theme="studio"] {
    --t-panel-bg: #d2d3d4;
    --t-panel-filter: none;
    --t-panel-edge: #b4b7ba;
    --t-header-bg: #231f20;                         /* panel header strips */
    --t-header-filter: none;
    --t-bar-bg: #ffffff;                            /* the main app's toolbar: white, black buttons */
    --t-ai-bg: #e4e3e0;
    --t-bar-filter: none;
    --t-bar-edge: #b9bcbf;
    --t-ai-header-bg: #d2d3d4;
    --t-ai-shadow: -8px 8px 24px rgba(35, 31, 32, 0.25);
    --t-drawer-shadow: 8px 0 24px rgba(35, 31, 32, 0.3);

    --t-text: #231f20;
    --t-text-dim: #55595e;
    --t-text-strong: #231f20;
    --t-line: #b9bcbf;
    --t-hover-text: #231f20;

    --t-surface: #e4e3e0;
    --t-surface-hi: #ecebe9;
    --t-btn-border: #7d848b;
    --t-btn-hover-border: #231f20;
    --t-btn-active-border: #f15a22;
    --t-bar-btn-active-border: #f15a22;
    --t-open-underline: #f15a22;

    --t-field-bg: #e4e3e0;
    --t-field-hover-bg: #ecebe9;
    --t-field-focus-bg: #f4f3f1;
    --t-field-text: #231f20;
    --t-field-border: #a3a8ad;
    --t-field-focus-border: #f15a22;
    --t-field-placeholder: #7d848b;
    --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='%23231f20' 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(241, 90, 34, 0.35);
    --t-log-text: #231f20;

    --t-check-off-bg: #e4e3e0;
    --t-check-off-border: #7d848b;
    --t-check-focus-border: #f15a22;
    --t-check-focus-ring: 0 0 0 2px rgba(241, 90, 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='%237d848b'/%3e%3c/svg%3e");

    --t-accent: #f15a22;                             /* the highlight: orange, white text */
    --t-accent-hi: #d94a15;
    --t-accent-text: #ffffff;
    --t-ai-accent: #f15a22;
    --t-progress-track: #b9bcbf;

    --t-menu-bg: #e4e3e0;
    --t-menu-border: #a3a8ad;
    --t-menu-text: #231f20;
    --t-menu-hover-bg: #d2d3d4;
    --t-menu-hover-text: #231f20;
    --t-menu-active-bg: #f15a22;
    --t-menu-active-text: #ffffff;
    --t-menu-header: #55595e;

    --t-msg-user-bg: #231f20;
    --t-msg-user-text: #ffffff;
    --t-msg-user-border: none;
    --t-msg-ai-bg: #d2d3d4;
    --t-msg-ai-text: #231f20;
    --t-file-bg: #e4e3e0;
    --t-file-border: #a3a8ad;
    --t-file-text: #231f20;
    --t-ai-field-hover-bg: #ecebe9;
    --t-ai-field-focus-bg: #f4f3f1;
    --t-ai-field-hover-border: #231f20;
    --t-ai-focus-border: #f15a22;
    --t-ai-input-ring: 0 0 0 2px rgba(241, 90, 34, 0.35);
    --t-ai-select-ring: 0 0 0 2px rgba(241, 90, 34, 0.35);
    --t-option-bg: #e4e3e0;
    --t-option-text: #231f20;

    --t-thumb-border: #a3a8ad;
    --t-thumb-filter: none;
    --t-scroll-color: #989fa6;
    --t-scroll-thumb: #989fa6;
    --t-scroll-thumb-hover: #7d848b;
    --t-page-scroll: #989fa6;
    --t-page-scroll-hover: #7d848b;

    --bp-paper: #e4e3e0;                            /* editor grid: the background, grey lines */
    --bp-major: rgba(35, 31, 32, 0.16);
    --bp-minor: rgba(35, 31, 32, 0.06);

    /* Main app (index.php) */
    --t-page-bg: #e4e3e0;
    --t-on-paper: #231f20;
    --t-bar-label: #55595e;
    --t-logo-filter: invert(1);                     /* black logo on the white toolbar */
    --t-header-text: #ffffff;
    --t-range-track: #a3a8ad;
    --t-mode-interp: #4c9a6a;                       /* green, blue, orange: the same meaning as every theme */
    --t-mode-signal: #5394b5;
    --t-mode-trigger: #f15a22;
    --t-mode-off: #989fa6;
    --t-mode-build: #5394b5;                        /* the Stage / Build label's Build (blue) */

    /* Timeline (WaveformGraphic.js, AudioGraphic.js) */
    --t-tl-bg: #e4e3e0;
    --t-tl-video: #5394b5;
    --t-tl-reactive: #f15a22;
    --t-tl-text: #b9bcbf;
    --t-tl-photo: #e8836a;
    --t-tl-svg: #8fb9cf;
    --t-tl-stack: #7d848b;
    --t-tl-midi: #231f20;
    --t-tl-audio: #c4c6c8;
    --t-tl-stroke: #231f20;
    --t-tl-selected: #f15a22;
    --t-tl-selected-stroke: #231f20;
    --t-tl-handle: #231f20;

    /* Stage overlays, drawn by the desktop renderer (theme-native.js sends them) */
    --t-stage-outline: #989fa6;
    --t-stage-shape: #55595e;
    --t-stage-select: #f15a22;
    --t-tl-playhead: #f15a22;
    --t-tl-wave-bg: #231f20;
    --t-tl-mix: #f15a22;

    /* Documentation (documentation/index.php maps its --stov-* tokens onto these) */
    --t-doc-paper: #e4e3e0;
    --t-doc-surface: #d2d3d4;
    --t-doc-surface-hover: #c6c8ca;
    --t-doc-ink: #231f20;
    --t-doc-slate: #55595e;
    --t-doc-line: #b9bcbf;
    --t-doc-accent: #d94a15;
    --t-doc-signal: #f15a22;
}