:root {
    /* Padding */
    --pad-1:                6px;                                             /* app shell, buttons, compact UI */
    --pad-2:                8px;                                             /* panel content and overlay inset */
    --pad-3:                4px;                                             /* dense media-list controls */

    /* Gap */
    --gap-1:                6px;                                             /* standard layout and UI gaps */

    /* Radius */
    --radius-1:             8px;                                             /* main panels */
    --radius-2:             6px;                                             /* nested panels and buttons */
    --radius-3:             3px;                                             /* dense media-list controls */
    
    /* Borders */
    --border-1:             1px;                                             /* controls and internal separators */
    --border-2:             2px;                                             /* main panels */

    /* Interaction States */
    --opacity-disabled:     0.48;

    /* Layout */
    --navbar:               58px;
    --header:               calc(var(--btn-slim-h) + 2 * var(--pad-2));
    --footer:               32px;
    --sidebar-control-cell: var(--sidebar-control-height);
    --sidebar-control-grid-w: calc((var(--sidebar-control-cell) * 8) + (var(--gap-1) * 7));
    --sidebar:              calc(var(--sidebar-control-grid-w) + (var(--pad-2) * 2) + var(--border-2));
    --sidebar-closed:       var(--navbar);

    /* Typography */
    --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-ui:              var(--font-main);
    --fs-title:             12px;
    --fs-button:            11px;
    --fs-text:              11px;
    --fs-console:           10px;
    --lh-title:             15px;
    --lh-button:            15px;
    --lh-text:              16px;
    --lh-console:           12px;
    --title-letter-spacing: 0.12em;
    --font-title:           400 var(--fs-title) / var(--lh-title) var(--font-ui);
    --font-button:          400 var(--fs-button) / var(--lh-button) var(--font-ui);
    --font-textblock:       400 var(--fs-text) / var(--lh-text) var(--font-ui);
    --font-console:         400 var(--fs-console) / var(--lh-console) var(--font-ui);

    /* Component Sizes */
    --btn-h:                32px;
    --btn-slim-h:           20px;
    --icon-size-sm:         calc(var(--btn-h) / 2);
    --icon-size-md:         calc(var(--btn-h) / 2);
    --media-list-h:         56px;
    --media-action-size:    calc((var(--media-list-h) - (var(--pad-3) * 2)) * 0.5);
    --method-btn-size:      calc(var(--navbar) - (var(--pad-2) * 2));
    --media-list-min-slots:  3;
    --sidebar-control-height: 39px;
    --sidebar-control-inset: 2px;
    --sidebar-control-icon: calc(var(--sidebar-control-height) - ((var(--sidebar-control-inset) + var(--border-1)) * 2));
    --sidebar-control-icon-radius: calc(var(--radius-2) - var(--sidebar-control-inset));
    --sidebar-control-slider-height: 12px;
    --sidebar-control-slider-radius: 2px;
    --sidebar-control-segment-height: var(--sidebar-control-icon);
    --sidebar-section-header-height: 34px;
    --sidebar-section-icon-size: 18px;
    --scrollbar-width:       5px;
    --scrollbar-thumb-width: 3px;
    --scrollbar-radius:      999px;

    /* Motion */
    --ease-fast:            140ms ease;
    --ease-shell:           180ms ease;

    /* Effects */
    --shadow-1:             0 2px 8px rgba(0, 0, 0, 0.24);
    --filter-blur-ui:       blur(16px);

    /* Layering */
    --z-base:               1;
    --z-ui:                 10;
    --z-overlay:            20;
    --z-modal:              100;

    /* 3D Curvature Visualization */
    --c-curvature-neutral:   rgb(196, 196, 196);
    --c-curvature-concave:   rgb(0, 164, 255);
    --c-curvature-convex:    rgb(255, 64, 16);

}

body {
    --c-slider-track: color-mix(in srgb, var(--c-border) 48%, var(--c-surface-solid));
    --c-slider-fill: color-mix(in srgb, var(--c-accent) 72%, var(--c-font-muted));
    --c-slider-marker: var(--c-font);
    --c-control-hover-bg: color-mix(in srgb, var(--c-accent) 8%, var(--c-surface-interactive));
    --c-control-active-bg: color-mix(in srgb, var(--c-accent) 12%, var(--c-surface-interactive));
    --c-control-hover-bg-solid: color-mix(in srgb, var(--c-accent) 8%, var(--c-surface-solid));
    --c-control-active-bg-solid: color-mix(in srgb, var(--c-accent) 12%, var(--c-surface-solid));
    --c-control-hover-border: color-mix(in srgb, var(--c-accent) 72%, var(--c-border));
    --c-focus-ring: color-mix(in srgb, var(--c-accent) 82%, var(--c-font));
    --c-icon: var(--c-font);
    --c-icon-muted: var(--c-font-muted);
}

body:not([data-theme]),
body[data-theme="dark"] {
    color-scheme: dark;

    /* Color Layers */
    --c-bg:                  rgb(12, 12, 12);           /* App fallback background when ambient background is off */
    --c-surface-solid:       rgb(18, 18, 18);          /* Solid surface for overlapping UI that must fully block what sits behind it */
    --c-surface-glass:       rgba(22, 22, 22, 0.4);    /* Translucent structural surface for glass panels and chrome */
    --c-surface-interactive: rgba(28, 28, 28, 0.4);    /* Interactive surface for buttons, inputs, and controls */
    --c-border:              rgb(48, 48, 48);          /* Default border color */

    /* Accent Colors */
    --c-theme-accent:        rgb(164, 255, 0);
    --c-accent:              var(--c-theme-accent);
    --c-danger:              rgb(255, 64, 96);
    --c-alarm:               rgb(255, 188, 64);

    /* Sidebar Section Colors */
    --c-section-media-list:  var(--c-accent);
    --c-section-file:        rgb(72, 164, 255);
    --c-section-filter:      rgb(190, 112, 255);
    --c-section-analytics:   rgb(40, 204, 212);
    --c-section-controls:    rgb(225, 188, 64);
    --c-section-view:        rgb(92, 208, 132);
    --c-section-3d-camera:   rgb(32, 204, 255);
    --c-section-lighting:    rgb(255, 140, 72);
    --c-section-shading:     rgb(232, 64, 168);
    --c-section-3d-mesh:     rgb(196, 255, 12);

    /* Console Colors */
    --c-console-level-info:    var(--c-section-file);
    --c-console-level-action:  var(--c-section-view);
    --c-console-level-warning: var(--c-section-controls);
    --c-console-level-error:   var(--c-danger);
    --c-console-level-system:  var(--c-font);

    /* Text And Icons */
    --c-font:                rgb(255, 255, 255);
    --c-font-muted:          rgba(255, 255, 255, 0.64);
    --c-panel-zoom-neutral:  rgba(255, 255, 255, 0.75);

    /* 3D View Colors */
    --c-grid-minor:          rgba(255, 255, 255, 0.10);
    --c-grid-major:          rgba(255, 255, 255, 0.24);
    --c-axis-x:              rgba(255, 80, 80, 0.68);
    --c-axis-y:              rgba(72, 212, 116, 0.68);
    --c-axis-z:              rgba(72, 132, 255, 0.68);

    /* Effects */
    --shadow-2:              0 4px 18px rgba(0, 0, 0, 0.24);
    --shadow-panel-file-label: 0 1px 3px rgba(0, 0, 0, 0.5), 0 0 6px rgba(0, 0, 0, 0.4);
    --shadow-zoom-label:     0 1px 3px rgba(0, 0, 0, 0.5), 0 0 6px rgba(0, 0, 0, 0.5);

    /* Background */
    --bg-contour-line-opacity: 0.08;
}

body[data-theme="light"] {
    color-scheme: light;

    /* Color Layers */
    --c-bg:                  rgb(255, 255, 255);       /* App fallback background when ambient background is off */
    --c-surface-solid:       rgb(245, 245, 245);       /* Solid surface for overlapping UI that must fully block what sits behind it */
    --c-surface-glass:       rgba(245, 245, 245, 0.4); /* Translucent structural surface for glass panels and chrome */
    --c-surface-interactive: rgba(255, 255, 255, 0.6); /* Interactive surface for buttons, inputs, and controls */
    --c-border:              rgb(96, 96, 96);           /* Default border color */

    /* Accent Colors */
    --c-theme-accent:        rgb(149, 230, 0);
    --c-accent:              var(--c-theme-accent);
    --c-danger:              rgb(170, 25, 50);
    --c-alarm:               rgb(125, 70, 0);

    /* Sidebar Section Colors */
    --c-section-media-list:  var(--c-accent);
    --c-section-file:        rgb(0, 80, 160);
    --c-section-filter:      rgb(100, 40, 160);
    --c-section-analytics:   rgb(0, 90, 100);
    --c-section-controls:    rgb(105, 75, 0);
    --c-section-view:        rgb(10, 95, 45);
    --c-section-3d-camera:   rgb(0, 82, 125);
    --c-section-lighting:    rgb(145, 55, 10);
    --c-section-shading:     rgb(155, 20, 100);
    --c-section-3d-mesh:     rgb(60, 90, 0);

    /* Console Colors */
    --c-console-level-info:    var(--c-section-file);
    --c-console-level-action:  var(--c-section-view);
    --c-console-level-warning: var(--c-section-controls);
    --c-console-level-error:   var(--c-danger);
    --c-console-level-system:  var(--c-font);

    /* Text And Icons */
    --c-font:                rgb(0, 0, 0);
    --c-font-muted:          rgba(0, 0, 0, 0.64);
    --c-panel-zoom-neutral:  rgba(0, 0, 0, 0.75);

    /* 3D View Colors */
    --c-grid-minor:          rgba(0, 0, 0, 0.10);
    --c-grid-major:          rgba(0, 0, 0, 0.24);
    --c-axis-x:              rgb(170, 25, 50);
    --c-axis-y:              rgb(10, 95, 45);
    --c-axis-z:              rgb(0, 80, 160);

    /* Effects */
    --shadow-2:              0 6px 18px rgba(0, 0, 0, 0.24);
    --shadow-panel-file-label: 0 1px 3px rgba(255, 255, 255, 0.5), 0 0 6px rgba(255, 255, 255, 0.4);
    --shadow-zoom-label:     0 1px 3px rgba(255, 255, 255, 0.5), 0 0 6px rgba(255, 255, 255, 0.5);

    /* Background */
    --bg-contour-line-opacity: 0.33;
}

@media (max-width: 640px) {
    :root {
        --pad-1: 3px;
        --pad-2: 6px;
        --pad-3: 3px;
        --gap-1: 3px;
        --navbar: 56px;
        --sidebar: 320px;
        --sidebar-closed: calc(var(--navbar) + (var(--pad-1) * 2));
        --btn-slim-h: 28px;
        --method-btn-size: calc(var(--navbar) - 3 * var(--pad-1));
        --media-list-min-slots: 2;
    }
}





body[data-theme-variant="magenta"] {
    --c-theme-accent: rgb(196, 64, 255);
    --c-accent: var(--c-theme-accent);
}

body[data-theme-variant="cyan"] {
    --c-theme-accent: rgb(16, 255, 228);
    --c-accent: var(--c-theme-accent);
}