/* ============================================================================
   constants.css — the ONE place for design tokens (constants).
   ----------------------------------------------------------------------------
   • Colors are the semantic --c-* tokens below. This is the *valid constants
     list*. Nothing else may define a color.
   • app.css contains classes only and references these tokens via var(--c-*).
   • Do NOT create alias tokens (e.g. --ui-bg: var(--c-bg)) — that duplicates a
     constant. Use the --c-* token directly at the point of use.
   ========================================================================== */

/* ---- Colors — light theme (default) ------------------------------------- */
:root,
[data-theme="light"] {
    --c-bg:              #eef2f6;
    --c-surface:         #ffffff;
    --c-surface-sunken:  #f7f9fc;
    --c-surface-raised:  #ffffff;
    --c-panel:           #e7edf4;
    --c-border:          #c9d2dd;
    --c-border-strong:   #aab6c4;
    --c-grid-line:       rgba(17, 24, 39, 0.08);

    --c-text:            #111827;
    --c-text-dim:        #4b5563;
    --c-text-inverse:    #ffffff;

    --c-accent:          #1e88b6;
    --c-accent-strong:   #0f6f95;

    --c-success:         #16a34a;
    --c-warning:         #f59e0b;
    --c-danger:          #dc2626;
    --c-info:            #0ea5e9;

    --c-process-idle:    #4a5c6a;
    --c-process-flow:    #c87941;
    --c-process-on:      #58c580;
    --c-machine-body:    white;

    --c-focus:           #4c9aff;
    --c-selection:       #ffd400;
    --c-overlay:         rgba(0, 0, 0, 0.45);
    --c-shadow:          rgba(15, 23, 42, 0.18);
    --c-highlight:       rgba(255, 255, 255, 0.6);
}

/* ---- Colors — dark theme ------------------------------------------------ */
[data-theme="dark"] {
    /* elevation ramp: sunken wells < bg < surface < raised cards < panel controls */
    --c-bg:              #101214;
    --c-surface:         #16181b;
    --c-surface-sunken:  #0b0d0f;
    --c-surface-raised:  #1a1d21;
    --c-panel:           #23262b;
    --c-border:          #2b2f34;
    --c-border-strong:   #454a51;
    --c-grid-line:       rgba(255, 255, 255, 0.04);

    --c-text:            #e2e4e6;
    --c-text-dim:        #9aa1a8;
    --c-text-inverse:    #ffffff;

    --c-accent:          #10b981;
    --c-accent-strong:   #34d399;

    --c-success:         #4ade80;
    --c-warning:         #f6b83c;
    --c-danger:          #f0524d;
    --c-info:            #45b8f2;

    --c-process-idle:    #4a5c6a;
    --c-process-flow:    #c87941;
    --c-process-on:      #58c580;
    --c-machine-body:    #10140f;

    --c-focus:           #4c9aff;
    --c-selection:       #ffd400;
    --c-overlay:         rgba(0, 0, 0, 0.55);
    --c-shadow:          rgba(0, 0, 0, 0.55);
    --c-highlight:       rgba(255, 255, 255, 0.06);
}

/* ---- Non-color scale tokens (sizing only; not colors) ------------------- */
:root {
    --font-ui: "Inter";
    --font-value: "IBM Plex Mono";
    color-scheme: light dark;

    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-6: 24px;

    --radius-sm: 4px;
    --radius:    8px;
    --radius-lg: 12px;
    --radius-pill: 999px;

    --shadow-1: 0 6px 18px var(--c-shadow);
    --shadow-2: 0 12px 28px var(--c-shadow);
    --shadow-3: 0 18px 36px var(--c-shadow);

    /* misc layout constants */
    --pe-input-min-height: 68px;
    --pe-diff-min-height: 120px;
}