/**
 * Babel WebView — shared design tokens and utilities.
 * Loaded on Index, Dashboard, Login; use var(--babel-*) in CSS and BabelTheme.get() in JS.
 * Palette (2026-10-09): the BabelStudio WinForms palette (GUIElementsWinForms BabelUiStyle): window #1E1F22,
 * chrome/run blocks #2B2D31, buttons #383A3F, borders #46484E, active tab #5C5E63, hover amber #E1A400,
 * Lucide green #3E6A00, text Gainsboro. Was a blue-slate palette.
 */
:root {
    /* Primary accents — a touch more saturation for clearer hierarchy */
    --babel-accent-green: #3e6a00;
    --babel-accent-green-hover: #4f8410;
    --babel-accent-red: #a85c54;
    --babel-accent-red-hover: #ba6d64;
    --babel-accent-amber: #e1a400;
    --babel-accent-amber-hover: #ffc31f;
    --babel-accent-blue: #5290c4;
    --babel-accent-blue-hover: #3f7eb5;

    /* Neutrals — blue-gray slate (less dull than pure #404040) */
    --babel-bg-page: #383a3f;
    --babel-bg-panel: #2b2d31;
    --babel-bg-elevated: #404247;
    --babel-bg-hover: #5c5e63;
    --babel-bg-disabled: #2b2d31;
    --babel-bg-input: #1e1f22;
    --babel-border-strong: #111214;
    --babel-border-muted: #46484e;
    --babel-border-soft: #5c5e63;
    --babel-edge: #111214;
    --babel-text-primary: #0f1419;
    --babel-text-on-dark: #dcdcdc;
    --babel-text-muted: #a0a3aa;
    --babel-text-silver: #c8cacf;
    --babel-text-title: #dcdcdc;
    --babel-link-steel: #a8c0e0;

    /* Toolbar / top bar — buttons sit on a slightly cooler ramp */
    --babel-tb-surface: #383a3f;
    --babel-tb-surface-hover: #5c5e63;
    --babel-tb-surface-disabled: #2b2d31;
    --babel-tb-icon: var(--babel-text-on-dark);
    --babel-tb-icon-muted: #a0a3aa;
    --babel-chrome-top: #2b2d31;
    --babel-chrome-bottom: #1e1f22;

    --tb-surface: var(--babel-tb-surface);
    --tb-surface-hover: var(--babel-tb-surface-hover);
    --tb-surface-disabled: var(--babel-tb-surface-disabled);
    --tb-icon: var(--babel-tb-icon);
    --tb-icon-muted: var(--babel-tb-icon-muted);
    --tb-edge: var(--babel-edge);
    --tb-green: var(--babel-accent-green);
    --tb-green-hover: var(--babel-accent-green-hover);
    --tb-red: var(--babel-accent-red);
    --tb-red-hover: var(--babel-accent-red-hover);

    /* Tabs (dashboard page strip) */
    --babel-tab-idle: #46484e;
    --babel-tab-hover: #5c5e63;
    --babel-tab-active-bg: #5c5e63;
    --babel-tab-active-fg: #dcdcdc;

    /* Shape */
    --babel-radius-sm: 4px;
    --babel-radius-md: 5px;
    --babel-radius-lg: 8px;
    --babel-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.35);
    --babel-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
    --babel-chrome-inset: inset 0 1px 0 rgba(255, 255, 255, 0.07);
    --babel-font-ui: 'Consolas', 'Courier New', monospace;
    /* BabelStudio config blocks: SystemSettings.GUIConfigModeFont + GUIBaseClass._nInputStepSize */
    --babel-config-font-size: 12px;
    --babel-config-line-height-row: 20px;
    --babel-config-line-height-settings: 15px;
}

/* Optional utility classes for JS-built markup (use alongside inline layout) */
.babel-font-ui {
    font-family: var(--babel-font-ui);
}

.babel-surface-elevated {
    background-color: var(--babel-bg-elevated);
    color: var(--babel-text-on-dark);
}

.babel-text-muted {
    color: var(--babel-text-muted);
}

.babel-border-default {
    border: 1px solid var(--babel-border-strong);
}

.babel-rounded-md {
    border-radius: var(--babel-radius-md);
}

/* Semantic chips for status / LEDs (optional — JS can toggle class) */
.babel-led-on {
    background-color: var(--babel-accent-green);
    box-shadow: 0 0 6px rgba(111, 138, 61, 0.5);
}

.babel-led-off {
    background-color: var(--babel-accent-red);
    box-shadow: 0 0 4px rgba(168, 92, 84, 0.45);
}