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

:root {
    /* Typography */
    --mpk4-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;

    /* 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;
}