/* css/base.css - Global styles, themes, and layout */

:root {
    /* --- NEW CUSTOM ACCENT COLORS --- */
    --hot-pink: #FF69B4;
    --electric-blue: #00BFFF;
    --deep-violet: #8A2BE2;
    --aqua-marine: #7FFFD4;
    --lavender: #E6E6FA;
    --pastel-green: #C1FFC1;
    --pastel-yellow: #FFFFAA;

    /* Black & White Theme (Dark Mode Default) */
    --bg-primary: #000000;
    --bg-window: #000000;
    --bg-window-content: #000000;
    --bg-title-bar: #000000;
    --bg-taskbar: #000000;
    --bg-start-menu: #000000;
    --bg-button: #000000;
    --bg-button-hover: #FFFFFF;
    --bg-button-active: #FFFFFF;
    --bg-input: #000000;
    --bg-dropzone: #000000;
    --bg-dropzone-dragover: #FFFFFF;
    --bg-sequencer-header: #000000;
    --bg-sequencer-label: #000000;
    --bg-sequencer-step-even: #1e1e1e;
    --bg-sequencer-step-odd: #2a2a2a;
    --bg-sequencer-step-hover: #FFFFFF;
    --bg-meter-track: #000000;
    --bg-meter-bar-container: #000000;
    --bg-modal-overlay: rgba(0,0,0,0.75);
    --bg-modal-dialog: #000000;
    --bg-context-menu: #000000;
    --bg-timeline-container: #000000;
    --bg-timeline-header: #000000;
    --bg-timeline-track-lane: #000000;
    --bg-timeline-track-lane-even: #000000;
    --bg-timeline-track-name: #000000;
    --bg-theme-toggle-button-hover: #FFFFFF;

    --text-primary: #FFFFFF;
    --text-secondary: #FFFFFF;
    --text-placeholder: #FFFFFF;
    --text-title-bar: #FFFFFF;
    --text-button: #FFFFFF;
    --text-button-hover: #000000;
    --text-start-menu-disabled: #FFFFFF;
    --text-dropzone: #FFFFFF;
    --text-dropzone-dragover: #000000;
    --text-dropzone-label: #FFFFFF;
    --text-dropzone-label-hover: #FFFFFF;
    --text-knob: #FFFFFF;
    --text-sequencer-header: #FFFFFF;
    --text-sequencer-step: #FFFFFF;
    --text-theme-toggle-icon: #FFFFFF;

    --border-primary: #FFFFFF;
    --border-secondary: #FFFFFF;
    --border-window-title-bottom: #FFFFFF;
    --border-button: #FFFFFF;
    --border-button-hover: #FFFFFF;
    --border-button-active-outer: #FFFFFF;
    --border-button-active-inner: #FFFFFF;
    --border-start-menu: #FFFFFF;
    --border-start-menu-shadow: #FFFFFF #FFFFFF #FFFFFF #FFFFFF;
    --border-pad: #FFFFFF;
    --border-pad-active: #FFFFFF;
    --border-pad-selected: #FFFFFF;
    --border-dropzone: #FFFFFF;
    --border-dropzone-dragover: #FFFFFF;
    --border-knob: #FFFFFF;
    --border-input: #FFFFFF;
    --border-sequencer: #FFFFFF;
    --border-waveform: #FFFFFF;
    --border-meter-bar-container: #FFFFFF;
    --border-modal: #FFFFFF;
    --border-context-menu: #FFFFFF;
    --border-timeline-header: #FFFFFF;
    --border-timeline-track-lane: #FFFFFF;
    --border-timeline-track-name: #FFFFFF;
    --border-theme-toggle-button: #000000;

    --shadow-window: none;
    --shadow-start-menu: none;
    --shadow-button-inset-main: #000000;
    --shadow-button-inset-secondary: #000000;
    --shadow-pad-inset-main: #000000;
    --shadow-pad-inset-secondary: #000000;
    --shadow-knob: none;
    --shadow-modal: none;
    --shadow-context-menu: none;

    /* --- Mapped Accent Colors (Dark Mode) --- */
    --accent-focus: var(--electric-blue); /* Used for hover/focus states */
    --accent-muted-text: #000000;
    --accent-muted: var(--lavender);
    --accent-soloed-text: #000000;
    --accent-soloed: var(--pastel-yellow);
    --accent-armed-text: #FFFFFF;
    --accent-armed: var(--hot-pink); /* Keep hot pink for armed/recording */
    --accent-active-text: #000000;
    --accent-active: var(--aqua-marine); /* General active state */
    --accent-sequencer-step-border: #000000;
    --accent-sequencer-step: var(--electric-blue); /* Notes in sequencer */
    --accent-sequencer-playing-outline: var(--pastel-yellow);
    --accent-meter: var(--pastel-green); /* Meters */
    --accent-meter-clip: var(--hot-pink); /* Clipping color */
    --accent-playhead: var(--hot-pink); /* Playhead in timeline */
    --accent-clip-bg: var(--electric-blue); /* Audio/MIDI clip background */
    --accent-clip-border: #000000;

    --scrollbar-track: #000000;
    --scrollbar-thumb: #FFFFFF;
    --scrollbar-thumb-hover: #FFFFFF;
    --scrollbar-thumb-border: #000000;
    --scrollbar-corner: #000000;

    /* FIX: Add dedicated piano key colors */
    --piano-key-white-bg: #FFFFFF;
    --piano-key-black-bg: #4a4a4a;
    --piano-key-white-text: #000000;
    --piano-key-black-text: #FFFFFF;

    --timeline-track-name-width: 120px;
}

.theme-light {
    /* Black & White Theme (Light Mode) */
    --bg-primary: #FFFFFF;
    --bg-window: #FFFFFF;
    --bg-window-content: #FFFFFF;
    --bg-title-bar: #FFFFFF;
    --bg-taskbar: #FFFFFF;
    --bg-start-menu: #FFFFFF;
    --bg-button: #FFFFFF;
    --bg-button-hover: #000000;
    --bg-button-active: #000000;
    --bg-input: #FFFFFF;
    --bg-dropzone: #FFFFFF;
    --bg-dropzone-dragover: #000000;
    --bg-sequencer-header: #FFFFFF;
    --bg-sequencer-label: #FFFFFF;
    --bg-sequencer-step-even: #f0f0f0;
    --bg-sequencer-step-odd: #FFFFFF;
    --bg-sequencer-step-hover: #000000;
    --bg-meter-track: #FFFFFF;
    --bg-meter-bar-container: #FFFFFF;
    --bg-modal-overlay: rgba(255,255,255,0.75);
    --bg-modal-dialog: #FFFFFF;
    --bg-context-menu: #FFFFFF;
    --bg-timeline-container: #FFFFFF;
    --bg-timeline-header: #FFFFFF;
    --bg-timeline-track-lane: #FFFFFF;
    --bg-timeline-track-lane-even: #FFFFFF;
    --bg-timeline-track-name: #FFFFFF;
    --bg-theme-toggle-button-hover: #000000;

    --text-primary: #000000;
    --text-secondary: #000000;
    --text-placeholder: #000000;
    --text-title-bar: #000000;
    --text-button: #000000;
    --text-button-hover: #FFFFFF;
    --text-start-menu-disabled: #000000;
    --text-dropzone: #000000;
    --text-dropzone-dragover: #FFFFFF;
    --text-dropzone-label: #000000;
    --text-dropzone-label-hover: #000000;
    --text-knob: #000000;
    --text-sequencer-header: #000000;
    --text-sequencer-step: #000000;
    --text-theme-toggle-icon: #000000;

    --border-primary: #000000;
    --border-secondary: #000000;
    --border-window-title-bottom: #000000;
    --border-button: #000000;
    --border-button-hover: #000000;
    --border-button-active-outer: #000000;
    --border-button-active-inner: #000000;
    --border-start-menu: #000000;
    --border-start-menu-shadow: #000000 #000000 #000000 #000000;
    --border-pad: #000000;
    --border-pad-active: #000000;
    --border-pad-selected: #000000;
    --border-dropzone: #000000;
    --border-dropzone-dragover: #000000;
    --border-knob: #000000;
    --border-input: #000000;
    --border-sequencer: #000000;
    --border-waveform: #000000;
    --border-meter-bar-container: #000000;
    --border-modal: #000000;
    --border-context-menu: #000000;
    --border-timeline-header: #000000;
    --border-timeline-track-lane: #000000;
    --border-timeline-track-name: #000000;
    --border-theme-toggle-button: #FFFFFF;

    --shadow-window: none;
    --shadow-start-menu: none;
    --shadow-button-inset-main: #FFFFFF;
    --shadow-button-inset-secondary: #FFFFFF;
    --shadow-pad-inset-main: #FFFFFF;
    --shadow-pad-inset-secondary: #FFFFFF;
    --shadow-knob: none;
    --shadow-modal: none;
    --shadow-context-menu: none;
    
    --accent-focus: var(--deep-violet);
    --accent-muted-text: #FFFFFF;
    --accent-muted: var(--deep-violet);
    --accent-soloed-text: #FFFFFF;
    --accent-soloed: var(--hot-pink);
    --accent-armed-text: #FFFFFF;
    --accent-armed: var(--hot-pink); /* Still hot pink for armed/recording */
    --accent-active-text: #FFFFFF;
    --accent-active: var(--electric-blue);
    --accent-sequencer-step-border: #FFFFFF;
    --accent-sequencer-step: var(--electric-blue);
    --accent-sequencer-playing-outline: var(--electric-blue);
    --accent-meter: var(--pastel-green);
    --accent-meter-clip: var(--hot-pink);
    --accent-playhead: var(--hot-pink);
    --accent-clip-bg: var(--electric-blue);
    --accent-clip-border: #FFFFFF;

    --scrollbar-track: #FFFFFF;
    --scrollbar-thumb: #000000;
    --scrollbar-thumb-hover: #000000;
    --scrollbar-thumb-border: #FFFFFF;
    --scrollbar-corner: #FFFFFF;
    
    --piano-key-white-bg: #FFFFFF;
    --piano-key-black-bg: #4a4a4a;
    --piano-key-white-text: #000000;
    --piano-key-black-text: #FFFFFF;
}

/* --- SnugOS General & Desktop Styling --- */
body {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    margin: 0;
    overflow: hidden;
    background-color: var(--bg-primary);
    color: var(--text-primary);
    padding-top: 40px;
    text-transform: lowercase !important;
}

#desktop {
    width: 100vw;
    height: calc(100vh - 40px - 32px);
    overflow: hidden;
    position: relative;
    background-color: var(--bg-primary);
}

/* --- Custom Scrollbar Styling --- */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
    border-radius: 0px;
}
::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: 2px;
    border: 1px solid var(--scrollbar-thumb-border);
}
::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-hover);
}
::-webkit-scrollbar-corner {
    background: var(--scrollbar-corner);
}
* {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}