/**
 * MPK4 Web Components - Theme CSS
 *
 * CSS custom properties for theming the Lit components.
 * Override these variables to customize the look and feel.
 */

:root,
[data-mpk4-theme="classic"] {
    /* Typography */
    --mpk4-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;

    /* App shell */
    --mpk4-app-bg: #1a1a1a;
    --mpk4-app-color: #eee;

    /* Device hardware surfaces (Classic: silver/gray + AKAI red) */
    --mpk4-device-accent-color: #c75050;
    --mpk4-screen-header-color: #00d4aa;
    --mpk4-device-frame-bg: linear-gradient(135deg, #d4d0ca 0%, #c8c4be 50%, #b8b4ae 100%);
    --mpk4-device-inner-bg: linear-gradient(135deg, #c8c4be 0%, #bbb7b1 100%);
    --mpk4-surface-panel-bg: #c8c4be;
    --mpk4-encoder-base-bg: #8a3535;
    --mpk4-encoder-knob-grad: linear-gradient(145deg, #4a4a4a 0%, #333 100%);
    --mpk4-encoder-knob-grad-hover: linear-gradient(145deg, #555 0%, #3a3a3a 100%);
    --mpk4-encoder-knob-grad-active: linear-gradient(145deg, #333 0%, #2a2a2a 100%);
    --mpk4-device-model-color: #333;
    --mpk4-device-model-muted: #666;

    /* Theme toggle */
    --mpk4-theme-toggle-bg: rgba(24, 24, 24, 0.92);
    --mpk4-theme-toggle-border: rgba(199, 80, 80, 0.55);
    --mpk4-theme-toggle-color: #f2f2f2;
    --mpk4-theme-toggle-shadow: rgba(0, 0, 0, 0.28);

    /* Step sequencer */
    --mpk4-sequencer-step-playing-bg: linear-gradient(135deg, #c75050 0%, #a93f3f 100%);
    --mpk4-sequencer-step-playing-border: rgba(255, 255, 255, 0.82);
    --mpk4-sequencer-step-playing-glow: rgba(199, 80, 80, 0.5);
    --mpk4-sequencer-step-playing-inset: rgba(255, 255, 255, 0.5);
    --mpk4-sequencer-pad-label-hover-bg: linear-gradient(135deg, #c75050 0%, #a93f3f 100%);
    --mpk4-sequencer-pad-label-hover-color: #ffffff;
    --mpk4-sequencer-pad-label-hover-border: rgba(255, 255, 255, 0.2);
    --mpk4-sequencer-pad-label-pressed-ring: rgba(255, 255, 255, 0.92);
    --mpk4-sequencer-pad-label-pressed-glow: rgba(255, 255, 255, 0.35);

    /* Status colors */
    --mpk4-status-bg: #16213e;
    --mpk4-status-color: #eee;
    --mpk4-status-connected-color: #4ade80;
    --mpk4-status-disconnected-color: #f87171;
    --mpk4-status-busy-color: #fbbf24;
    --mpk4-status-error-color: #f87171;
    --mpk4-status-error-bg: #2d1f1f;

    /* Buttons */
    --mpk4-button-bg: #00d4ff;
    --mpk4-button-color: #1a1a2e;
    --mpk4-button-hover-bg: #00a8cc;
    --mpk4-button-disabled-bg: #4a5568;
    --mpk4-button-disabled-color: #718096;

    /* Cards and containers */
    --mpk4-card-bg: #16213e;
    --mpk4-device-item-bg: #0f3460;

    /* Text colors */
    --mpk4-heading-color: #fbbf24;
    --mpk4-label-color: #a5d6ff;
    --mpk4-value-color: #7ee787;
    --mpk4-muted-color: #888;

    /* Inputs */
    --mpk4-input-bg: #0f3460;
    --mpk4-input-border: #30363d;
    --mpk4-input-color: #eee;

    /* Event log */
    --mpk4-log-bg: #0d1117;
    --mpk4-log-border: #30363d;
    --mpk4-log-height: 250px;
    --mpk4-log-midi-color: #7ee787;
    --mpk4-log-event-color: #79c0ff;
    --mpk4-log-error-color: #f85149;
    --mpk4-log-warn-color: #d29922;
    --mpk4-log-info-color: #a5d6ff;
    --mpk4-log-timestamp-color: #6e7681;
}

[data-mpk4-theme="dark"] {
    /* App shell */
    --mpk4-app-bg: #12151a;
    --mpk4-app-color: #ececec;

    /* Device hardware surfaces (Dark edition, sampled from MPK Mini dark hardware photos) */
    --mpk4-device-accent-color: #c84038;
    --mpk4-screen-header-color: #59d6ba;
    --mpk4-device-frame-bg: linear-gradient(135deg, #686868 0%, #606060 48%, #505050 100%);
    --mpk4-device-inner-bg: linear-gradient(135deg, #707070 0%, #585858 100%);
    --mpk4-surface-panel-bg: #606060;
    --mpk4-encoder-base-bg: #901008;
    --mpk4-encoder-knob-grad: linear-gradient(145deg, #585858 0%, #404040 100%);
    --mpk4-encoder-knob-grad-hover: linear-gradient(145deg, #686868 0%, #505050 100%);
    --mpk4-encoder-knob-grad-active: linear-gradient(145deg, #484848 0%, #303030 100%);
    --mpk4-device-model-color: #f0f0f0;
    --mpk4-device-model-muted: #d0d0d0;

    /* Theme toggle */
    --mpk4-theme-toggle-bg: rgba(34, 34, 34, 0.94);
    --mpk4-theme-toggle-border: rgba(200, 64, 56, 0.7);
    --mpk4-theme-toggle-color: #f8f8f8;
    --mpk4-theme-toggle-shadow: rgba(0, 0, 0, 0.35);

    /* Step sequencer */
    --mpk4-sequencer-step-playing-bg: linear-gradient(135deg, #c84038 0%, #a81810 100%);
    --mpk4-sequencer-step-playing-border: rgba(248, 248, 248, 0.86);
    --mpk4-sequencer-step-playing-glow: rgba(200, 64, 56, 0.55);
    --mpk4-sequencer-step-playing-inset: rgba(255, 255, 255, 0.42);
    --mpk4-sequencer-pad-label-hover-bg: linear-gradient(135deg, #c84038 0%, #a81810 100%);
    --mpk4-sequencer-pad-label-hover-color: #ffffff;
    --mpk4-sequencer-pad-label-hover-border: rgba(255, 255, 255, 0.22);
    --mpk4-sequencer-pad-label-pressed-ring: rgba(248, 248, 248, 0.95);
    --mpk4-sequencer-pad-label-pressed-glow: rgba(255, 255, 255, 0.3);

    /* Status colors */
    --mpk4-status-bg: #1c2128;
    --mpk4-status-color: #f2f2f2;

    /* Buttons */
    --mpk4-button-bg: #c03830;
    --mpk4-button-color: #ffffff;
    --mpk4-button-hover-bg: #a81810;
    --mpk4-button-disabled-bg: #3f4651;
    --mpk4-button-disabled-color: #7c8693;

    /* Cards/inputs/logs */
    --mpk4-card-bg: #1a2027;
    --mpk4-device-item-bg: #232b35;
    --mpk4-heading-color: #e5e9ee;
    --mpk4-label-color: #b4bcc7;
    --mpk4-value-color: #f5f7fa;
    --mpk4-muted-color: #8a95a3;
    --mpk4-input-bg: #151a21;
    --mpk4-input-border: #363e49;
    --mpk4-input-color: #edf2f7;
    --mpk4-log-bg: #11161c;
    --mpk4-log-border: #303844;
    --mpk4-log-midi-color: #87df95;
    --mpk4-log-event-color: #7dbcf6;
    --mpk4-log-error-color: #ff8080;
    --mpk4-log-warn-color: #e5bf72;
    --mpk4-log-info-color: #c1cbd8;
    --mpk4-log-timestamp-color: #8892a0;
}