/* ==========================================================================
    Theme Variables
   ========================================================================== */
:root {
    --color-preview-box-width: 190px;
    --min-width-picker-wrapper: 780px;
    --radius-global: 4px;
    --size-checkerboard: 14px;
    --width-input-shared: 45px;
    --width-unit-span: 10px;

    --swatch-size: 45px;

    --slider-track-height: 28px;
    --slider-thumb-height: calc(var(--slider-track-height) + 8px);
    --slider-thumb-width: 12px;
    --slider-value-input-width: 50px;

    /* H1 Animation Variables */
    --text-dark: hsl(0, 0%, 10%);
    --text-block-letter-on-light: var(--text-dark);
    --shadow-default: hsl(0, 0%, 0%, 0.3);
    --button-animation-duration: 8s;
    --animation-base-hue: 0deg;
    --animation-base-saturation: 0%;
    --animation-base-lightness: 30%;
    --button-saturation: 90%;
    --h1-block-lightness: 50%;

    /* Accent Color - Updated dynamically via JS */
    --color-accent-main: #4a4a4a;
    --color-text-on-accent: #ffffff;

    /* Default Dark Theme Colors */
    --color-bg-button-hover: #666;
    --color-bg-button-disabled: #404040;
    --color-bg-button-swatch-copy-hover: hsl(0 0% 0% / 0.7);
    --color-bg-button-swatch-copy: hsl(0 0% 0% / 0.5);
    --color-bg-button: #555;
    --color-bg-checkerboard: #404040;
    --color-bg-control-surface: #333;
    --color-bg-input-darker: #2a2a2a;
    --color-bg-input: #444;
    --color-bg-page: #1a1a1a;
    --color-bg-slider-group-active: hsl(0 0% 0% / 0.22);
    --color-bg-slider-thumb: #ddd;
    --color-bg-tab-active: var(--color-bg-control-surface);
    --color-bg-tab: #222;
    --color-bg-text-swatch-hover: hsl(0 0% 15% / 0.85);
    --color-border-control-surface: #4f4f4f;
    --color-border-input: #555;
    --color-border-slider-thumb: #777;
    --color-checkerboard-pattern: #505050;
    --color-outline-drag-over: hsl(211 100% 50%);
    --color-shadow-drag-over: hsl(211 100% 50% / 0.5);
    --color-text-button-hover: #fff;
    --color-text-button-swatch-copy: #fff;
    --color-text-button: #ddd;
    --color-text-button-disabled: #888;
    --text-highlight-on-dark: hsl(0, 0%, 90%); /* For text on dark animated buttons */
    --color-text-heading: hsl(var(--animation-base-hue), var(--animation-base-saturation), 70%);
    --color-text-inactive: #555;
    --color-text-input: hsl(var(--animation-base-hue), var(--animation-base-saturation), 85%);
    --color-text-page-secondary: hsl(var(--animation-base-hue), var(--animation-base-saturation), 65%);
    --color-text-page: hsl(var(--animation-base-hue), var(--animation-base-saturation), 80%);
    --color-text-swatch-hover: #eee;
    --color-text-tab-active: hsl(var(--animation-base-hue), var(--animation-base-saturation), 90%);
    --color-text-tab: hsl(var(--animation-base-hue), var(--animation-base-saturation), 70%);

    --color-bg-slider-track: #4a4a4a; /* Default track background */
    --color-border-slider-track: hsl(0 0% 0% / 0.2); /* Default track border */
    --shadow-slider-thumb: 0 1px 2px hsl(0 0% 0% / 0.25);

    --bin-border-color-default: var(--color-border-input);
    --bin-border-color-drag-over: red;
    --bin-border-color-pending-clear: orange;
    --bin-icon-color-default: var(--color-text-inactive);
    --bin-icon-color-drag-over: red;
    --bin-icon-color-pending-clear: orange;
    --bin-bg-drag-over: hsl(0 100% 50% / 0.2);

    /* For JS-driven slider tracks */
    --background-image-slider-track-hsl-h: linear-gradient(to right, hsl(0 100% 50%), hsl(60 100% 50%), hsl(120 100% 50%), hsl(180 100% 50%), hsl(240 100% 50%), hsl(300 100% 50%), hsl(0 100% 50%));
    --background-image-slider-track-saturation: transparent;
    --background-image-slider-track-lightness: transparent;
    --background-image-slider-track-oklch-l: linear-gradient(to right, #777, #777);
    --background-image-slider-track-oklch-c: linear-gradient(to right, #777, #777);
    --background-image-slider-track-oklch-h: linear-gradient(to right, #777, #777); /* Fallback for OKLCH H */
    --background-image-slider-track-opacity: linear-gradient(to right, hsla(0, 0%, 50%, 0), hsl(0, 0%, 50%));
}

html.theme-light {
    /* Light Theme Overrides */
    --color-bg-page: #e3e3e3;
    --color-bg-button: #bbb;
    --color-bg-button-disabled: #ccc;
    --color-bg-button-hover: #666;
    --color-text-button-hover: #fff;
    --color-text-button: #222;
    --color-text-button-disabled: #999;
    --color-bg-checkerboard: #f0f0f0;
    --color-checkerboard-pattern: #ccc;
    --color-bg-control-surface: #d0d0d0;
    --color-border-control-surface: #bbb;
    --color-outline-drag-over: hsl(211 100% 35%);
    --color-shadow-drag-over: hsl(211 100% 35% / 0.4);
    --color-bg-input-darker: #e0e0e0;
    --color-bg-input: #f0f0f0;
    --color-border-input: #aaa;
    --color-text-input: hsl(var(--animation-base-hue), 20%, 15%);
    --color-bg-slider-group-active: hsl(0 0% 0% / 0.03);
    --color-bg-button-swatch-copy: hsl(0 0% 100% / 0.6);
    --color-bg-button-swatch-copy-hover: hsl(0 0% 100% / 0.8);
    --color-text-button-swatch-copy: #333;
    --color-bg-text-swatch-hover: hsl(0 0% 94% / 0.85);
    --color-text-swatch-hover: #333;
    --color-bg-tab-active: var(--color-bg-control-surface);
    --color-text-tab-active: hsl(var(--animation-base-hue), 30%, 20%);
    --color-bg-tab: #e0e0e0;
    --color-text-tab: hsl(var(--animation-base-hue), 15%, 35%);
    --color-text-heading: hsl(var(--animation-base-hue), 20%, 25%);
    --color-text-inactive: #bbb;
    --color-text-page: hsl(var(--animation-base-hue), 20%, 20%);
    --color-text-page-secondary: hsl(var(--animation-base-hue), 15%, 40%);
    --color-bg-slider-thumb: #666;
    --color-border-slider-thumb: #444;

    --color-bg-slider-track: #e0e0e0;
    --color-border-slider-track: hsl(0 0% 0% / 0.12);
    --shadow-slider-thumb: 0 1px 2px hsl(0 0% 0% / 0.15);

    --bin-icon-color-default: var(--color-text-inactive);

    /* Light theme JS-driven slider track fallbacks if needed */
    --background-image-slider-track-oklch-l: linear-gradient(to right, #ccc, #808080);
    --background-image-slider-track-oklch-c: linear-gradient(to right, #ccc, #808080);
    --background-image-slider-track-oklch-h: linear-gradient(to right, #ccc, #808080);
    --background-image-slider-track-opacity: linear-gradient(to right, rgba(128, 128, 128, 0), rgba(128, 128, 128, 1));
}