:root {
    --color-bg: #F2EFE9;
    --color-text: #1A1A1A;
    --color-accent: #E8472A;
    --color-teal: #4BB8C4;
    --color-panel-dark: #1A1A1A;
    --color-panel-text: #F2EFE9;
    --color-border: rgba(26, 26, 26, 0.3);
    --color-border-solid: #1A1A1A;
    --color-border-section: #a8a8a8;

    /* Semantic surface overlays (text color at reduced opacity) */
    --color-surface-hover: rgba(26, 26, 26, 0.04);
    --color-surface-active: rgba(26, 26, 26, 0.06);

    /* Muted text */
    --color-text-muted: rgba(26, 26, 26, 0.5);

    /* Badge palette (earth-tone fills on cream) */
    --color-badge-success: #2D5A3E;
    --color-badge-success-text: #D6EFE0;
    --color-badge-warning: #8B5E00;
    --color-badge-warning-text: #F2E8D0;
    --color-badge-info: #2A5A6B;
    --color-badge-info-text: #D4E9EF;
    --color-badge-muted-bg: rgba(26, 26, 26, 0.08);
    --color-badge-muted-text: rgba(26, 26, 26, 0.4);
    --color-badge-purple: #5B3A6B;
    --color-badge-purple-text: #E4D4EF;

    /* Mono font stack (single source of truth) */
    --font-mono: Proto, ui-monospace, SFMono-Regular, monospace;
}

[x-cloak] { display: none !important; }

/* LED pulse indicators — test connection modal */
@keyframes led-pulse-pass {
    0%, 100% { box-shadow: 0 0 4px 1px rgba(34, 197, 94, 0.5); }
    50%      { box-shadow: 0 0 8px 3px rgba(34, 197, 94, 0.8); }
}
@keyframes led-pulse-fail {
    0%, 100% { box-shadow: 0 0 4px 1px rgba(232, 71, 42, 0.5); }
    50%      { box-shadow: 0 0 8px 3px rgba(232, 71, 42, 0.8); }
}
.led-pass { background-color: #22c55e; animation: led-pulse-pass 2s ease-in-out infinite; }
.led-fail { background-color: #E8472A; animation: led-pulse-fail 2s ease-in-out infinite; }
.led-skip { background-color: rgba(26, 26, 26, 0.15); }  /* no token — unique one-off */