/* ============================================================================
   SPEED ERP — DESIGN TOKENS
   Single source of truth for color, type, spacing, radius, shadow, focus,
   layout, and status-badge semantics. No selectors here — variables only.
   Consumed by components.css and (during migration) by page-level <style>
   blocks. Do not hardcode a hex color, box-shadow, or border-radius anywhere
   else in the app — reference a var(--se-*) instead.
   ============================================================================ */
:root {
    /* ---------- Brand ----------
       Indigo, replacing the prior corporate blue (#4e73df/#224abe).
       Deliberate: the enterprise-SaaS reskin's reference direction chose
       this over keeping the old hue. --se-brand-rgb must stay in sync by
       hand (CSS can't derive R,G,B components from a hex token). */
    --se-brand:        #4f46e5;
    --se-brand-hover:  #4338ca;
    --se-brand-active: #3730a3;
    --se-brand-dark:   #4338ca;   /* sidebar gradient terminus */
    --se-brand-tint:   #eef2ff;   /* selected-row / active-nav wash */
    --se-brand-rgb:    79, 70, 229;
    --se-sidebar-gradient: linear-gradient(180deg, var(--se-brand) 10%, var(--se-brand-dark) 100%);
    --se-mobile-topbar-gradient: linear-gradient(90deg, var(--se-brand) 0%, var(--se-brand-hover) 100%);

    /* ---------- Sidebar surface ----------
       Light rail per the enterprise-SaaS reskin (was a dark brand-gradient
       fill with rgba(255,255,255,x) text/icons — components.css §2 now
       consumes these instead of hardcoding that white-on-dark palette). */
    --se-sidebar-bg:          var(--se-bg-surface);
    --se-sidebar-fg:          var(--se-text-body);
    --se-sidebar-fg-strong:   var(--se-text);
    --se-sidebar-fg-muted:    var(--se-text-muted);
    --se-sidebar-fg-faint:    var(--se-text-muted);
    --se-sidebar-border:      var(--se-border);
    --se-sidebar-hover-bg:    var(--se-bg-hover);
    --se-sidebar-active-bg:   var(--se-brand-tint);
    --se-sidebar-active-fg:   var(--se-brand);
    --se-sidebar-icon:        var(--se-text-muted);
    --se-sidebar-icon-active: var(--se-brand);

    /* ---------- Semantic ---------- */
    --se-success:       #28a745;
    --se-success-hover: #218838;
    --se-warning:       #ffc107;
    --se-warning-hover: #e0a800;
    --se-warning-fg:    #212529;
    --se-danger:        #dc3545;
    --se-danger-hover:  #c82333;
    --se-info:          #17a2b8;
    --se-info-hover:    #138496;
    --se-neutral:       #6c757d;
    --se-neutral-hover: #5a6268;

    /* ---------- Surfaces & borders ---------- */
    --se-bg-app:        #f8f9fc;
    --se-bg-surface:    #ffffff;
    --se-bg-subtle:     #f8f9fa;
    --se-bg-hover:      #f8f9fc;
    --se-border:        #e0e0e0;
    --se-border-strong: #d1d3e2;
    --se-border-subtle: #f1f1f1;

    /* ---------- Loading overlays ----------
       Full-page overlay backdrop and the lighter section/table-scoped one —
       previously each page hardcoded its own rgba(255,255,255,N), four
       different opacities across the app. */
    --se-overlay-bg:      rgba(255, 255, 255, 0.9);
    --se-overlay-bg-soft: rgba(255, 255, 255, 0.75);

    /* ---------- Text ---------- */
    --se-text:        #2c3e50;
    --se-text-body:   #5a5c69;
    --se-text-muted:  #6c757d;
    --se-text-meta:   #495057;
    --se-text-invert: #ffffff;

    /* ---------- Type scale ---------- */
    --se-fs-2xs: 10px;
    --se-fs-xs:  11px;
    --se-fs-sm:  12px;
    --se-fs-md:  13px;   /* body default */
    --se-fs-lg:  14px;
    --se-fs-xl:  16px;
    --se-fs-2xl: 18px;
    --se-fs-3xl: 24px;
    --se-fs-stat: 30px;   /* headline KPI numbers — bolder/larger than 3xl per the reskin */
    --se-fs-display: 32px;

    --se-lh-tight: 1.25;
    --se-lh-base:  1.5;

    --se-fw-regular:  400;
    --se-fw-medium:   500;
    --se-fw-semibold: 600;
    --se-fw-bold:     700;

    --se-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    --se-font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;

    /* ---------- Spacing (4px base) ---------- */
    --se-sp-1: 0.25rem;
    --se-sp-2: 0.5rem;
    --se-sp-3: 0.75rem;
    --se-sp-4: 1rem;
    --se-sp-5: 1.5rem;
    --se-sp-6: 2rem;
    --se-sp-7: 3rem;

    /* ---------- Radius ---------- */
    --se-radius-sm:     4px;
    --se-radius-md:     6px;
    --se-radius-lg:     8px;
    --se-radius-xl:     12px;
    --se-radius-pill:   999px;
    --se-radius-circle: 50%;

    /* ---------- Elevation ---------- */
    --se-shadow-xs:      0 1px 2px rgba(58, 59, 69, 0.06);
    --se-shadow-sm:      0 2px 4px rgba(58, 59, 69, 0.08);
    --se-shadow-md:      0 4px 12px rgba(58, 59, 69, 0.10);
    --se-shadow-lg:      0 10px 32px rgba(58, 59, 69, 0.16);
    --se-shadow-sidebar: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.15);

    /* ---------- Focus ring (one, everywhere) ---------- */
    --se-focus-border: var(--se-brand);
    --se-focus-ring:   0 0 0 0.2rem rgba(var(--se-brand-rgb), 0.25);

    /* ---------- Layout ---------- */
    --se-sidebar-w:           250px;
    --se-sidebar-w-collapsed: 6.5rem;
    --se-topbar-h-mobile:     50px;
    --se-content-pad:         1.5rem;
    --se-content-pad-mobile:  1rem;

    /* ---------- Z-index ---------- */
    --se-z-sidebar:  1000;
    --se-z-backdrop: 999;
    --se-z-mobiletop: 1050;
    --se-z-modal:    1055;
    --se-z-overlay:  9999;

    /* ---------- Motion ---------- */
    --se-transition-fast: 0.15s ease-in-out;
    --se-transition:      0.2s ease-in-out;

    /* ========================================================================
       STATUS BADGE MAP — single source of truth.
       Every .status-{state} class in components.css reads from these six
       buckets. Semantics: wait=amber (waiting on someone), live=cyan
       (in flight), good=green (done / success), bad=red (failed / stopped),
       idle=grey (not yet real), info=blue (informational / type tag).
       ======================================================================== */
    --se-st-wait-bg: #fff3cd; --se-st-wait-fg: #856404; --se-st-wait-bd: #ffeaa7;
    --se-st-live-bg: #d1ecf1; --se-st-live-fg: #0c5460; --se-st-live-bd: #bee5eb;
    --se-st-good-bg: #d4edda; --se-st-good-fg: #155724; --se-st-good-bd: #c3e6cb;
    --se-st-bad-bg:  #f8d7da; --se-st-bad-fg:  #721c24; --se-st-bad-bd:  #f5c6cb;
    --se-st-idle-bg: #e9ecef; --se-st-idle-fg: #495057; --se-st-idle-bd: #dee2e6;
    --se-st-info-bg: #e3f2fd; --se-st-info-fg: #1565c0; --se-st-info-bd: #bbdefb;
}