/* DrumBeet shared design tokens.
   Brand swatches are mirrored in static/images/brand/drumbeet-palette.svg. */
:root {
    --db-brand-ink: #0f1117;
    --db-brand-night: #303050;
    --db-brand-eggplant: #4f3068;
    --db-brand-plum: #7b4f87;
    --db-brand-beet: #b54f86;
    --db-brand-orchid: #e0a0e0;
    --db-brand-leaf: #708040;
    --db-brand-moss: #566b35;
    --db-brand-wheat: #c0b090;
    --db-brand-cream: #fbf7ef;

    --bs-bg: var(--db-brand-ink);
    --bs-surface: #1a1d27;
    --bs-surface-elevated: #212634;
    --bs-surface-hover: #22263a;
    --bs-bg-elevated: var(--bs-surface-elevated);
    --bs-bg-hover: var(--bs-surface-hover);
    --bs-border: #2a2e3f;
    --bs-border-strong: #3d445b;
    --bs-text: #e8eaed;
    --bs-text-muted: #8b8fa3;
    --bs-text-inverse: var(--db-brand-ink);
    --bs-fg: var(--bs-text);
    --bs-muted: var(--bs-text-muted);
    --bs-accent: var(--db-brand-beet);
    --bs-accent-hover: #a0437a;
    --bs-accent-soft: rgba(181, 79, 134, 0.15);
    --bs-success: #22c55e;
    --bs-danger: #ef4444;
    --bs-warning: #f59e0b;
    --bs-warning-text: #1f1301;
    --bs-overlay: rgba(6, 11, 20, 0.56);
    --bs-input-bg: #151926;
    --bs-input-text: var(--bs-text);
    --bs-input-placeholder: var(--bs-text-muted);
    --bs-input-border: var(--bs-border-strong);
    --bs-overlay-panel: rgba(17, 20, 31, 0.94);
    --bs-overlay-border: rgba(255, 255, 255, 0.12);
    --bs-overlay-control: rgba(255, 255, 255, 0.07);
    --bs-surface-base: var(--bs-surface);
    --bs-shadow-sm: 0 10px 24px rgba(0, 0, 0, 0.16);
    --bs-shadow-md: 0 18px 42px rgba(0, 0, 0, 0.22);
    --bs-radius-sm: 6px;
    --bs-radius-md: 10px;
    --bs-radius-lg: 16px;
    --bs-space-xs: 4px;
    --bs-space-sm: 8px;
    --bs-space-md: 16px;
    --bs-space-lg: 24px;
    --bs-space-xl: 32px;
    --bs-sidebar-width: 300px;
    --bs-sidebar-rail-width: 76px;
    --bs-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --db-safe-top: env(safe-area-inset-top, 0px);
    --db-safe-right: env(safe-area-inset-right, 0px);
    --db-safe-bottom: env(safe-area-inset-bottom, 0px);
    --db-safe-left: env(safe-area-inset-left, 0px);
    --bs-preview-surface: rgba(26, 29, 39, 0.94);
    --bs-preview-toolbar: rgba(17, 20, 31, 0.92);
    --bs-preview-panel: rgba(20, 24, 37, 0.88);
    --bs-preview-panel-strong: rgba(24, 28, 43, 0.96);
    --bs-preview-track-label-text: #f8fafc;
    --bs-thumbnail-bg: #151926;
    --bs-thumbnail-lane-even: rgba(224, 160, 224, 0.09);
    --bs-thumbnail-lane-odd: rgba(192, 176, 144, 0.05);
    --bs-thumbnail-grid: rgba(255, 255, 255, 0.1);
    --bs-thumbnail-empty-text: #8b8fa3;
    --bs-grid-bg: rgba(15, 17, 23, 0.62);
    --bs-grid-row-alt: rgba(224, 160, 224, 0.08);
    --bs-grid-subdivision: rgba(139, 143, 163, 0.22);
    --bs-grid-beat-line: rgba(224, 160, 224, 0.26);
    --bs-grid-bar-line: rgba(240, 185, 238, 0.45);
    --bs-grid-selection-fill: rgba(224, 160, 224, 0.18);
    --bs-grid-selection-stroke: rgba(240, 185, 238, 0.42);
    --bs-grid-playhead: #fbbf24;
    --bs-grid-playhead-glow: rgba(251, 191, 36, 0.35);
    --bs-grid-scroll-track: rgba(42, 46, 63, 0.45);
    --bs-grid-scroll-thumb: rgba(224, 160, 224, 0.42);
    --bs-map-bg: rgba(255, 255, 255, 0.04);
    --bs-map-point-ring: rgba(255, 255, 255, 0.85);
    --bs-map-point-ring-muted: rgba(255, 255, 255, 0.18);
    --bs-map-selection-ring: #ffffff;
    --bs-map-empty-text: rgba(255, 255, 255, 0.52);

    --db-surface-0: var(--bs-bg);
    --db-surface-1: var(--bs-surface);
    --db-surface-2: color-mix(in srgb, var(--bs-surface) 86%, var(--bs-bg));
    --db-surface-menu: var(--bs-surface);
    --db-surface-toolbar: var(--bs-surface);
    --db-text-primary: var(--bs-fg);
    --db-text-secondary: var(--bs-text, var(--bs-fg));
    --db-text-muted: var(--bs-muted);
    --db-text-inverse: #ffffff;
    --db-border-subtle: var(--bs-border);
    --db-border-strong: var(--bs-border-strong, var(--bs-border));
    --db-border-focus: var(--bs-accent, #6366f1);
    --db-accent-primary: var(--bs-accent, #6366f1);
    --db-accent-active: #6366f1;
    --db-accent-selected: #0ea5e9;
    --db-accent-playhead: var(--daw-grid-playhead, #f59e0b);
    --db-success: #10b981;
    --db-warning: #f59e0b;
    --db-destructive: #dc2626;
    --db-space-1: 4px;
    --db-space-2: 6px;
    --db-space-3: 12px;
    --db-space-4: 16px;
    --db-space-5: 20px;
    --db-space-6: 24px;
    --db-radius-sm: 4px;
    --db-radius-md: 8px;
    --db-shadow-menu: 0 18px 40px rgba(15, 23, 42, 0.2);
    --db-touch-target: 44px;
}

html {
    color-scheme: dark;
}

html[data-theme='light'] {
    color-scheme: light;
    --bs-bg: var(--db-brand-cream);
    --bs-surface: #fffdf8;
    --bs-surface-elevated: #ffffff;
    --bs-surface-hover: #f4ece1;
    --bs-bg-elevated: var(--bs-surface-elevated);
    --bs-bg-hover: var(--bs-surface-hover);
    --bs-border: #e0d3c8;
    --bs-border-strong: #c9b7aa;
    --bs-text: #2f2136;
    --bs-text-muted: #6f6175;
    --bs-text-inverse: #ffffff;
    --bs-fg: var(--bs-text);
    --bs-muted: var(--bs-text-muted);
    --bs-accent: var(--db-brand-eggplant);
    --bs-accent-hover: #3e2454;
    --bs-accent-soft: rgba(79, 48, 104, 0.12);
    --bs-success: #0f9f63;
    --bs-danger: #c03a3a;
    --bs-warning: #c06605;
    --bs-warning-text: #ffffff;
    --bs-overlay: rgba(15, 23, 42, 0.18);
    --bs-input-bg: #fffaf4;
    --bs-input-text: var(--bs-text);
    --bs-input-placeholder: var(--bs-text-muted);
    --bs-input-border: var(--bs-border-strong);
    --bs-overlay-panel: rgba(255, 253, 248, 0.94);
    --bs-overlay-border: rgba(79, 48, 104, 0.14);
    --bs-overlay-control: rgba(79, 48, 104, 0.07);
    --bs-surface-base: #fffaf4;
    --bs-shadow-sm: 0 10px 26px rgba(15, 23, 42, 0.08);
    --bs-shadow-md: 0 18px 40px rgba(15, 23, 42, 0.12);
    --bs-preview-surface: rgba(255, 255, 255, 0.96);
    --bs-preview-toolbar: rgba(251, 247, 239, 0.96);
    --bs-preview-panel: rgba(255, 250, 244, 0.92);
    --bs-preview-panel-strong: rgba(255, 255, 255, 0.98);
    --bs-preview-track-label-text: #ffffff;
    --bs-thumbnail-bg: #fffaf4;
    --bs-thumbnail-lane-even: rgba(79, 48, 104, 0.08);
    --bs-thumbnail-lane-odd: rgba(112, 128, 64, 0.05);
    --bs-thumbnail-grid: rgba(79, 48, 104, 0.16);
    --bs-thumbnail-empty-text: #6f6175;
    --bs-grid-bg: rgba(255, 250, 244, 0.96);
    --bs-grid-row-alt: rgba(79, 48, 104, 0.05);
    --bs-grid-subdivision: rgba(111, 97, 117, 0.2);
    --bs-grid-beat-line: rgba(79, 48, 104, 0.18);
    --bs-grid-bar-line: rgba(79, 48, 104, 0.32);
    --bs-grid-selection-fill: rgba(79, 48, 104, 0.1);
    --bs-grid-selection-stroke: rgba(79, 48, 104, 0.28);
    --bs-grid-playhead: #d97706;
    --bs-grid-playhead-glow: rgba(217, 119, 6, 0.24);
    --bs-grid-scroll-track: rgba(215, 222, 234, 0.88);
    --bs-grid-scroll-thumb: rgba(79, 48, 104, 0.34);
    --bs-map-bg: rgba(79, 48, 104, 0.05);
    --bs-map-point-ring: rgba(47, 33, 54, 0.82);
    --bs-map-point-ring-muted: rgba(47, 33, 54, 0.16);
    --bs-map-selection-ring: #2f2136;
    --bs-map-empty-text: rgba(111, 97, 117, 0.82);
}