/*
 * themes.css
 * ----------------------------------------------------------
 * Design token system for SoundSketcher themes.
 *
 * LIGHT THEME  — defined as :root defaults (matches existing
 *                hardcoded values, so no extra CSS rules needed).
 *
 * DARK THEME   — overrides under [data-theme="dark"].
 *
 * Adding a new theme (e.g. "sepia"):
 *   1. Add  [data-theme="sepia"] { --t-...: ...; }  here.
 *   2. Add component overrides in a new sepia-theme.css
 *      using the same var(--t-...) names.
 * ----------------------------------------------------------
 */

/* ── Light theme tokens (defaults) ─────────────────────────── */
:root {
    /* Page chrome */
    --t-page-bg:              #ffffff;
    --t-page-fg:              #172132;
    --t-page-border:          #e2e8f0;

    /* Navbar */
    --t-nav-bg:               #ffffff;
    --t-nav-fg:               #20242a;
    --t-nav-border:           #e6ebf2;
    --t-nav-tool-bg:          #f8fafc;
    --t-nav-tool-border:      #edf1f6;
    --t-nav-btn-bg:           #ffffff;
    --t-nav-btn-border:       #d4dce8;
    --t-nav-btn-hover-bg:     #f1f5f9;
    --t-nav-btn-hover-border: #8fa0b5;
    --t-nav-brand-fg:         #15171c;
    --t-nav-link-fg:          #20242a;

    /* Side panels */
    --t-panel-bg:             rgba(255,255,255,0.96);
    --t-panel-border:         #d4dce8;
    --t-panel-fg:             #172132;
    --t-panel-rail-bg:        rgba(255,255,255,0.94);
    --t-panel-rail-fg:        #172132;
    --t-panel-rail-border:    #d4dce8;
    --t-panel-header-bg:      transparent;
    --t-panel-header-border:  #e3e9f1;
    --t-panel-title-fg:       #111923;

    /* Canvas */
    --t-canvas-bg:            #ffffff;

    /* Library dropdown */
    --t-lib-bg:               #ffffff;
    --t-lib-border:           #d6dee7;
    --t-lib-fg:               #111111;
    --t-lib-hover-bg:         #f1f6f8;
    --t-lib-title-fg:         #16243a;
    --t-lib-meta-fg:          #5a687a;
    --t-lib-status-fg:        #5f6368;
    --t-lib-byline-fg:        #7a9ab0;
    --t-lib-badge-bg:         #e8f0f8;
    --t-lib-badge-border:     #b0c4da;
    --t-lib-badge-fg:         #4a6080;
    --t-lib-tag-bg:           #e8f3f1;
    --t-lib-tag-fg:           #236b79;
    --t-lib-search-bg:        #ffffff;
    --t-lib-search-fg:        #14233a;
    --t-lib-search-border:    #d6dee7;

    /* Library action buttons */
    --t-lib-action-bg:        #ffffff;
    --t-lib-action-border:    #d0dbe6;

    /* Library group chips */
    --t-lib-chip-bg:          #ffffff;
    --t-lib-groups-panel-bg:  #ffffff;
    --t-lib-groups-item-fg:   #2a3a4a;
    --t-lib-groups-input-bg:  transparent;
    --t-lib-groups-input-fg:  #2a3a4a;

    /* Library group popover */
    --t-lib-popover-bg:       #ffffff;
    --t-lib-popover-border:   #d0dbe6;
    --t-lib-popover-item-fg:  #2a3a4a;
    --t-lib-popover-hover-bg: #f0f6fa;
    --t-lib-popover-active-bg:#e8f4f8;

    /* Library strips & toolbar */
    --t-lib-strip-bg:         #f4f8fb;
    --t-lib-strip-border:     #e8eff5;
    --t-lib-toolbar-bg:       #fafcfd;
    --t-lib-toolbar-border:   #edf1f6;
    --t-lib-filter-bg:        #f8fbfd;

    /* Library stat chips */
    --t-lib-stat-fg:          #6a8090;
    --t-lib-stat-chip-bg:     #edf3f9;
    --t-lib-stat-chip-border: #c4d6e4;
    --t-lib-stat-chip-fg:     #3a5a78;

    /* Library explore / sort / source buttons */
    --t-lib-btn-fg:           #5a7a90;
    --t-lib-btn-hover-bg:     #edf4f8;
    --t-lib-explore-border:   #c8d8e8;
    --t-lib-filter-chip-bg:   #ffffff;
    --t-lib-filter-chip-border:#c8dae6;
    --t-lib-filter-chip-fg:   #3a6070;

    /* Import overlay & queue */
    --t-import-overlay-bg:    rgba(255,255,255,0.97);
    --t-import-overlay-border:#d0dbe6;
    --t-import-item-bg:       #f8fbfd;
    --t-import-item-border:   #dde8f0;
    --t-import-item-fg:       #16243a;
    --t-import-bar-bg:        #dde8f0;
    --t-import-btn-bg:        #f4f8fb;
    --t-import-btn-border:    #b0c4d8;
    --t-import-btn-fg:        #2c6080;
    --t-import-select-bg:     #f5f8fc;
    --t-import-select-fg:     #3a5070;
    --t-import-select-border: #c4d0dc;
    --t-import-close-hover:   #f0f4f8;

    /* Inputs / selects (global) */
    --t-input-bg:             #ffffff;
    --t-input-fg:             #14233a;
    --t-input-border:         #d6dee7;
    --t-input-focus-border:   #2c7a92;

    /* Sketch panels / modals — same as --sm-* but namespaced */
    --t-sketch-bg:            #ffffff;
    --t-sketch-bg-alt:        #f5f8fc;
    --t-sketch-fg:            #172132;
    --t-sketch-border:        #dce6f0;
    --t-sketch-muted:         #6a7e92;
    --t-sketch-toggle-off:    #bfccd8;
    --t-sketch-navy:          #1a3a5c;
    --t-sketch-teal-bg:       #eef6fa;

    /* Settings panel (Canvas menu) */
    --t-settings-fg:          inherit;
    --t-settings-group-fg:    inherit;
    --t-settings-group-border:#cccccc;
    --t-settings-select-bg:   #ffffff;
    --t-settings-select-fg:   inherit;
    --t-settings-select-border:#cccccc;

    /* Overlays (feature progress, modals) */
    --t-overlay-bg:           rgba(255,255,255,0.96);
    --t-overlay-fg:           #23527a;
    --t-overlay-border:       #b9d4eb;

    /* Sketch toolbar (bottom bar) */
    --t-toolbar-bg:            #f4f7fb;
    --t-toolbar-border:        #d8e3ef;
    --t-toolbar-btn-bg:        #ffffff;
    --t-toolbar-btn-fg:        #4a7a94;
    --t-toolbar-btn-border:    #c4d4e4;
    --t-toolbar-btn-hover-bg:  #eef4fb;
    --t-toolbar-panel-fg:      #1a3a5c;

    /* Mixer */
    --t-mixer-bg:              #f9f9f9;
    --t-mixer-border:          #dddddd;
    --t-mixer-fg:              #333333;
    --t-mixer-popup-bg:        #ffffff;
    --t-mixer-popup-border:    #cccccc;

    /* f0sc settings block */
    --t-f0sc-bg:               #f0f5fb;
    --t-f0sc-border:           #d0dde8;
    --t-f0sc-fg:               #3a5c7a;
    --t-f0sc-btn-bg:           #eef4fb;
    --t-f0sc-btn-border:       #7aadd8;

    /* Tutorial modal */
    --t-tutorial-bg:          #ffffff;
    --t-tutorial-border:      #cccccc;

    /* Tooltip (SVG feature tooltip) */
    --t-tooltip-bg:           rgba(0,0,0,0.8);
    --t-tooltip-fg:           #ffffff;
    --t-tooltip-border:       transparent;

    /* Axis ticks */
    --t-axis-stroke:          black;
    --t-axis-fill:            black;
}


/* ── Dark theme token overrides ─────────────────────────────── */
[data-theme="dark"] {
    /* Page chrome */
    --t-page-bg:              #0e0f14;
    --t-page-fg:              #cdd4e0;
    --t-page-border:          #21263a;

    /* Navbar */
    --t-nav-bg:               #0e0f14;
    --t-nav-fg:               #c0c8d8;
    --t-nav-border:           #191d2c;
    --t-nav-tool-bg:          #13151f;
    --t-nav-tool-border:      #191d2c;
    --t-nav-btn-bg:           #191d2c;
    --t-nav-btn-border:       #2c3248;
    --t-nav-btn-hover-bg:     #202438;
    --t-nav-btn-hover-border: #3a4060;
    --t-nav-brand-fg:         #d0d8e8;
    --t-nav-link-fg:          #b8c2d4;

    /* Side panels */
    --t-panel-bg:             rgba(15,17,24,0.98);
    --t-panel-border:         #191d2c;
    --t-panel-fg:             #cdd4e0;
    --t-panel-rail-bg:        rgba(12,13,18,0.96);
    --t-panel-rail-fg:        #4e5a70;
    --t-panel-rail-border:    #191d2c;
    --t-panel-header-bg:      transparent;
    --t-panel-header-border:  #191d2c;
    --t-panel-title-fg:       #c8d2e0;

    /* Canvas */
    --t-canvas-bg:            #000000;

    /* Library dropdown */
    --t-lib-bg:               #15182a;
    --t-lib-border:           #252a3e;
    --t-lib-fg:               #cdd4e0;
    --t-lib-hover-bg:         #1c2035;
    --t-lib-title-fg:         #d8dfe8;
    --t-lib-meta-fg:          #7888a0;
    --t-lib-status-fg:        #8090a8;
    --t-lib-byline-fg:        #5a7090;
    --t-lib-badge-bg:         #1e2840;
    --t-lib-badge-border:     #2e3e58;
    --t-lib-badge-fg:         #7898b8;
    --t-lib-tag-bg:           #162830;
    --t-lib-tag-fg:           #4aaab8;
    --t-lib-search-bg:        #1c2035;
    --t-lib-search-fg:        #cdd4e0;
    --t-lib-search-border:    #2a2f42;

    /* Library action buttons */
    --t-lib-action-bg:        #1c2035;
    --t-lib-action-border:    #2a2f42;

    /* Library group chips */
    --t-lib-chip-bg:          #1c2035;
    --t-lib-groups-panel-bg:  #15182a;
    --t-lib-groups-item-fg:   #b8c4d4;
    --t-lib-groups-input-bg:  #1c2035;
    --t-lib-groups-input-fg:  #cdd4e0;

    /* Library group popover */
    --t-lib-popover-bg:       #15182a;
    --t-lib-popover-border:   #252a3e;
    --t-lib-popover-item-fg:  #b8c4d4;
    --t-lib-popover-hover-bg: #1c2035;
    --t-lib-popover-active-bg:#172030;

    /* Library strips & toolbar */
    --t-lib-strip-bg:         #12141f;
    --t-lib-strip-border:     #191d2c;
    --t-lib-toolbar-bg:       #0f1018;
    --t-lib-toolbar-border:   #191d2c;
    --t-lib-filter-bg:        #0f1018;

    /* Library stat chips */
    --t-lib-stat-fg:          #6a7a90;
    --t-lib-stat-chip-bg:     #1a2038;
    --t-lib-stat-chip-border: #2a3450;
    --t-lib-stat-chip-fg:     #7898b8;

    /* Library explore / sort / source buttons */
    --t-lib-btn-fg:           #6a7a90;
    --t-lib-btn-hover-bg:     #1a2035;
    --t-lib-explore-border:   #252a3e;
    --t-lib-filter-chip-bg:   #1c2035;
    --t-lib-filter-chip-border:#2a3040;
    --t-lib-filter-chip-fg:   #7898b8;

    /* Import overlay & queue */
    --t-import-overlay-bg:    rgba(13,15,22,0.98);
    --t-import-overlay-border:#252a3e;
    --t-import-item-bg:       #12141f;
    --t-import-item-border:   #1e2338;
    --t-import-item-fg:       #c0cad8;
    --t-import-bar-bg:        #1e2338;
    --t-import-btn-bg:        #13162a;
    --t-import-btn-border:    #252a3e;
    --t-import-btn-fg:        #6090b8;
    --t-import-select-bg:     #1c2035;
    --t-import-select-fg:     #9ab0c8;
    --t-import-select-border: #2a2f42;
    --t-import-close-hover:   #1a1e2c;

    /* Inputs / selects */
    --t-input-bg:             #1c2035;
    --t-input-fg:             #cdd4e0;
    --t-input-border:         #2a2f42;
    --t-input-focus-border:   #3a7a92;

    /* Sketch panels / modals */
    --t-sketch-bg:            #161928;
    --t-sketch-bg-alt:        #1c2035;
    --t-sketch-fg:            #cdd4e0;
    --t-sketch-border:        #252a3e;
    --t-sketch-muted:         #7080a0;
    --t-sketch-toggle-off:    #2e3448;
    --t-sketch-navy:          #3a6088;
    --t-sketch-teal-bg:       #12253a;

    /* Settings panel */
    --t-settings-fg:          #cdd4e0;
    --t-settings-group-fg:    #6a7a90;
    --t-settings-group-border:#252a3e;
    --t-settings-select-bg:   #1c2035;
    --t-settings-select-fg:   #cdd4e0;
    --t-settings-select-border:#2a2f42;

    /* Overlays */
    --t-overlay-bg:           rgba(13,15,22,0.97);
    --t-overlay-fg:           #6090b8;
    --t-overlay-border:       #1e3a58;

    /* Sketch toolbar (bottom bar) */
    --t-toolbar-bg:            #0d0f18;
    --t-toolbar-border:        #181c28;
    --t-toolbar-btn-bg:        #141824;
    --t-toolbar-btn-fg:        #6a9ab8;
    --t-toolbar-btn-border:    #252a3e;
    --t-toolbar-btn-hover-bg:  #1a2035;
    --t-toolbar-panel-fg:      #9ab8d0;

    /* Mixer */
    --t-mixer-bg:              #12141e;
    --t-mixer-border:          #252a3e;
    --t-mixer-fg:              #b8c4d4;
    --t-mixer-popup-bg:        #161928;
    --t-mixer-popup-border:    #252a3e;

    /* f0sc settings block */
    --t-f0sc-bg:               #121828;
    --t-f0sc-border:           #1e2a3e;
    --t-f0sc-fg:               #7898b8;
    --t-f0sc-btn-bg:           #162030;
    --t-f0sc-btn-border:       #2a4868;

    /* Tutorial modal */
    --t-tutorial-bg:          #161928;
    --t-tutorial-border:      #252a3e;

    /* Tooltip */
    --t-tooltip-bg:           rgba(10,12,20,0.97);
    --t-tooltip-fg:           #cdd4e0;
    --t-tooltip-border:       #252a3e;

    /* Axis ticks */
    --t-axis-stroke:          rgba(160,180,210,0.45);
    --t-axis-fill:            rgba(160,180,210,0.70);
}