:root {

    /* ─────────────────────────────────────────────────────────────────────
       Fonts
       ───────────────────────────────────────────────────────────────────── */
    /* ── Font families ──────────────────────────────────────────────────────────
       --font-main     all UI, controls, interactive, and structural text
       --font-numeric  technical read-outs: time counters, frame counts, sizes
       --font-code     inline code and file-format references in body text     */
    --font-main:        system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-numeric:     ui-monospace, "Cascadia Code", "Menlo", monospace;
    --font-code:        ui-monospace, "Cascadia Code", "Menlo", monospace;
    --font-weight-bold: 600;

    /* ─────────────────────────────────────────────────────────────────────
       Panel chrome
       Single hue — half-transparent so stacking elements naturally create
       depth without needing separate colors for each layer.
       ───────────────────────────────────────────────────────────────────── */
    --panel-color:     16, 16, 24;                          /* RGB — used with rgba()      */
    --panel-bg:        rgba(var(--panel-color), 0.5);    /* standard panel surface      */
    --panel-bg-hover:  rgba(var(--panel-color), 0.66);    /* tab / hovered panel layer   */
    --select-option-bg: #0d0d22;                          /* <select> option popup bg    */
    --panel-blur:      18px;
    --panel-width:     300px;
    --tab-width:       30px;
    --tab-height:      90px;

    /* ─────────────────────────────────────────────────────────────────────
       Z-layers
       ───────────────────────────────────────────────────────────────────── */
    --z-background: 0;
    --z-grain:      1;
    --z-timeline:   9;
    --z-panel:      10;
    --z-topbar:     11;

    /* ─────────────────────────────────────────────────────────────────────
       Surfaces  (white-on-dark alpha layers)
       --surface-input  interactive controls: buttons, selects, inputs
       --surface-panel  structural chrome: group headers, progress track
       --surface-active on-state for toggles / snap buttons
       --surface-hover  hover overlay for any element
       ───────────────────────────────────────────────────────────────────── */
    --surface-input:  rgba(255, 255, 255, 0.05);   /* buttons, selects, inputs     */
    --surface-panel:  rgba(255, 255, 255, 0.10);   /* group headers, progress bar  */
    --surface-active: rgba(255, 255, 255, 0.20);   /* on-state / active toggle     */
    --surface-hover:  rgba(255, 255, 255, 0.15);   /* any hovered element          */

    /* ─────────────────────────────────────────────────────────────────────
       Borders
       Color-only tokens compose into `border-color:` rules.
       Shorthand tokens drop directly into `border:` / `border-*:`.
       ───────────────────────────────────────────────────────────────────── */
    --border-color-panel:   rgba(255, 255, 255, 0.08);   /* panel outer edge    */
    --border-color-sub:     rgba(255, 255, 255, 0.16);   /* group dividers      */
    --border-color-input:   rgba(255, 255, 255, 0.16);   /* buttons & inputs    */
    --border-color-swatch:  rgba(255, 255, 255, 0.16);   /* color swatches      */
    --border-color-hover:   rgba(255, 255, 255, 0.28);   /* hover border        */
    --border-color-on:      rgba(255, 255, 255, 0.32);   /* active / on border  */

    --border-panel:  1px solid var(--border-color-panel);
    --border-sub:    1px solid var(--border-color-sub);
    --border-input:  1px solid var(--border-color-input);
    --border-swatch: 1px solid var(--border-color-swatch);

    /* ─────────────────────────────────────────────────────────────────────
       Text  (ordered lightest → darkest by opacity)
       ───────────────────────────────────────────────────────────────────── */
    --text-dim:       rgba(255, 255, 255, 0.50);   /* hints, read-only    */
    --text-muted:     rgba(255, 255, 255, 0.50);   /* icons, off-state    */
    --text-secondary: rgba(255, 255, 255, 0.50);   /* buttons, meta text  */
    --text-icon:      rgba(255, 255, 255, 0.75);   /* decorative glyphs   */
    --text-label:     rgba(255, 255, 255, 0.75);   /* row labels          */
    --text-primary:   rgba(255, 255, 255, 0.75);   /* body text           */
    --text-hover:     rgba(255, 255, 255, 0.90);   /* hover / active      */
    --text-value:     rgba(255, 255, 255, 0.90);   /* slider overlays     */

    /* ─────────────────────────────────────────────────────────────────────
       Controls  (sliders, dropdowns, square icon buttons)
       ───────────────────────────────────────────────────────────────────── */
    --ctrl-height:        22px;   /* height of all interactive controls; width+height for square buttons */
    --slider-fill:        rgba(255, 255, 255, 0.5);    /* filled track       */
    --slider-empty:       rgba(128, 128, 156, 0.1);    /* empty track        */
    --slider-gap:         3px;                          /* X / Y spacing      */
    --slider-thumb-width: 3px;                          /* thumb line width   */
    --slider-thumb-color: #fff;                         /* thumb & tip color  */

    /* Color swatch — height spans two controls + the gap between them */
    --swatch-width:  calc(2 * var(--ctrl-height));

    /* ─────────────────────────────────────────────────────────────────────
       Layout & spacing
       --pad-outer  outer panel horizontal padding
       --pad-inner  inner content padding + header/footer vertical
       --pad-header header top padding (slightly taller)
       --pad-top    group content top gap
       ───────────────────────────────────────────────────────────────────── */
    --radius-1:      12px;    /* outer containers (bars, panels)      */
    --radius-2:      5px;     /* inner elements  (= radius-1 − pad-1) */
    --pad-1:         7px;     /* outer → inner gap (radius math)      */
    --icon-size:            18px;   /* groups, big buttons, sidebar toggles */
    --icon-size-sm:         16px;   /* small buttons (shuffle, swatch add/remove) */
    --ctrl-group-icon-size: 18px;   /* group-header identity icon */

    --ui-gap:        16px;   /* floating bar offset from screen edge */
    --pad-outer:     14px;   /* panel horizontal padding   */
    --pad-inner:     10px;   /* content, header-y, footer  */
    --pad-header:    12px;   /* header top padding         */
    --pad-top:        6px;   /* group content top          */

    --gap-content:   5px;    /* rows inside a group        */
    --gap-row:       7px;    /* label → control            */

    --row-height:    15px;   /* minimum row height         */
    --label-width:   70px;   /* controls label column      */
    --label-width-exp: 60px; /* export label column        */

    /* ─────────────────────────────────────────────────────────────────────
       Transitions
       ───────────────────────────────────────────────────────────────────── */
    --ease-panel: 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    --ease-hover: 0.15s;
    --ease-fast:  0.12s;

    /* ── Type scale ─────────────────────────────────────────────────────────────
       4 styles:
         1 · Heading   ALL CAPS · bold · --letter-spacing-ui  · --font-size-base
         2 · Label     normal   · —    · 0                   · --font-size-base
         3 · Button    ALL CAPS · —    · --letter-spacing-sm  · --font-size-sm
         4 · Body      normal   · —    · 0                   · --font-size-base
       Numeric read-outs → --font-numeric · --font-size-sm
       Code / file refs  → --font-code    · 0.9em            */
    --font-size-base: 14px;   /* styles 1 · 2 · 4                              */
    --font-size-sm:   12px;   /* style 3 · value overlays · sub-dividers       */

    --letter-spacing-ui: 2px;   /* style 1 — group and panel headings          */
    --letter-spacing-sm: 1px;   /* style 3 — buttons and sub-dividers          */

    /* ── Text colours  (pending consolidation — text-tier cleanup pass) ──────── */
    --t-sidebar-title-color: rgba(255, 255, 255, 0.45);
    --t-section-color:       rgba(255, 255, 255, 0.48);
    --t-divider-color:       var(--text-muted);
    --t-label-color:         var(--text-label);
    --t-btn-color:           var(--text-secondary);
    --t-info-color:          var(--text-dim);

    /* ─────────────────────────────────────────────────────────────────────
       Grain  (runtime-adjustable via the Grain contwls group)
       ───────────────────────────────────────────────────────────────────── */
    --grain-opacity:  0.28;
    --grain-contrast: 11;
    --grain-speed:    13s;
    --grain-size:     208px;

    /* ─────────────────────────────────────────────────────────────────────
       App background
       ───────────────────────────────────────────────────────────────────── */
    --color-bg: #000;
    --checker:  #161616;   /* transparency checkerboard squares (editor only)   */

    /* ─────────────────────────────────────────────────────────────────────
       Group accent colours — one muted hue per control/export group, used to
       tint the header glyph + a thin stripe so groups are easy to tell apart.
       Consistent saturation/lightness keeps it a cohesive set, not a rainbow.
       ───────────────────────────────────────────────────────────────────── */
    --accent-presets:        #7E8AD8;   /* periwinkle */
    --accent-colors:         #DB7BA8;   /* rose       */
    --accent-geometry:       #5BB6B0;   /* teal       */
    --accent-displacement:   #5AA0DD;   /* sky blue   */
    --accent-grain:          #C9A36B;   /* sand       */
    --accent-blend:          #A87FD6;   /* violet     */
    --accent-transform:      #D98E5C;   /* orange     */
    --accent-camera:         #6FBF8E;   /* green      */
    --accent-performance:    #A9C25A;   /* lime       */
    --accent-image:          #D9B45A;   /* gold       */
    --accent-video-sequence: #DD7A6E;   /* coral      */
    --accent-html-export:    #5AB6C9;   /* cyan       */
    --accent-export-publish: #CB6BBE;   /* magenta    */

    /* Sidebar — dimmed accent (group content stripe + slider fill).
       Dimmed by blending the accent toward an OPAQUE base so the result is a flat
       solid colour — no backdrop bleed-through, identical at any screen position.
       --group-accent-dim   how much accent vs. base (higher = more vivid accent)
       --group-dim-base     the solid colour the accent is darkened toward        */
    --group-accent-dim: 66%;
    --group-dim-base:    rgb(var(--panel-color));

    /* Displacement wave colours — the three frequency dots in the XY pad + tabs */
    --wave-1: #E2A24A;   /* amber */
    --wave-2: #4FC0B0;   /* teal  */
    --wave-3: #E07AAE;   /* rose  */

}

@media (max-width: 600px) {
    :root {
      --panel-width: 256px;
      --panel-blur:  2px;
    }
}