/* ============================================================================
   COMMAND CENTER — DESIGN TOKENS (:root). Single source of truth for color,
   spacing, radius, type scale, and semantic state colors. Loaded first, before
   cc-chrome.css / cc-components.css / cc-errors.css and before MudBlazor.
   ============================================================================ */

/* ----------------------------------------------------------------------------
   CANONICAL BREAKPOINTS — align new media queries to these (they mirror
   MudBlazor's sm/md/lg so CSS and the C# theme agree):
       sm   600px   phone / small tablet boundary  (max-width: 599.98px = phone)
       md   960px   tablet / desktop boundary      (max-width: 959.98px = compact)
       lg  1280px   wide desktop
   Chrome-specific thresholds:
       1200px  drawer auto-collapse (MainLayout.cs DrawerCollapseBelowPx) — the
               persistent 280px drawer is wide, so it folds before the md edge.
   Prefer the values above over ad-hoc 700/768/860/992 breakpoints in new rules.
   ---------------------------------------------------------------------------- */
:root {
    --cc-red: #F3002B;
    --cc-red-hover: #D10025;
    --cc-black: #000;
    --cc-header-bg: #1a1a1a;
    --cc-dark-gray: #4d4d4d;
    --cc-medium-gray: #b3b3b3;
    --cc-light-gray: #ebebeb;
    --cc-bg: #f5f5f5;
    --cc-white: #fff;
    --cc-success: #22c55e;
    --cc-warning: #f59e0b;
    --cc-info: #3b82f6;
    --cc-danger: #ef4444;

    /* ---- extended neutrals (promoted from ad-hoc hex used across pages) ---- */
    --cc-gray-200: #e5e7eb;       /* wizard inactive step / rail */
    --cc-gray-300: #cccccc;       /* tab-bar surface */
    --cc-gray-400: #9ca3af;       /* offline state gray */
    --cc-gray-500: #757575;       /* nav section labels */
    --cc-hover-surface: #fafafa;  /* row / list hover background */
    --cc-border-subtle: #f0f0f0;  /* faint row dividers inside cards */

    /* ---- "solid tone" fills — saturated status colors used as icon/tile/avatar
            backgrounds and card rails (distinct from the lighter --cc-success/-warning/-info
            fills used for dots). Promoted from ad-hoc hex; reused 3-5x each. ---- */
    --cc-success-solid: #16a34a;
    --cc-warning-solid: #ea580c;
    --cc-info-solid: #2563eb;

    /* ---- external brand (Salesforce links) ---- */
    --cc-sf-blue: #0070d2;

    /* ---- Monitor live-control palette — NOTE: distinct state semantics from
            --cc-state-* (here mowing = emerald, idle = blue). Kept separate so the
            two scales can diverge. ---- */
    --cc-emerald: #10b981;
    --cc-slate: #64748b;

    /* ---- semantic "strong text on tint" — readable text colors that pair with
            the 10-18% tinted backgrounds on pills, banners, chips, status text.
            Single source so every success/warning/etc. label matches. ---- */
    --cc-success-text: #166534;
    --cc-warning-text: #92400e;
    --cc-danger-text: #b8001f;
    --cc-info-text: #1d4ed8;

    --cc-header-h: 72px;
    --cc-tab-bar-h: 52px;
    --cc-footer-h: 36px;
    --cc-bottom-nav-h: 60px;

    /* ---- spacing scale ---- */
    --cc-sp-1: 2px;
    --cc-sp-2: 4px;
    --cc-sp-3: 6px;
    --cc-sp-4: 8px;
    --cc-sp-5: 12px;
    --cc-sp-6: 14px;
    --cc-sp-7: 18px;
    --cc-sp-8: 24px;

    /* ---- corner radii ---- */
    --cc-radius-sm: 6px;
    --cc-radius-md: 8px;
    --cc-radius-lg: 12px;

    /* ---- type scale ---- */
    --cc-fs-xs: 12px;
    --cc-fs-sm: 13px;
    --cc-fs-md: 14px;
    --cc-fs-lg: 16px;

    /* ---- semantic machine-state colors (single source of truth;
            mirrored by the C# StateColor() helper, which returns these class names) ---- */
    --cc-state-mowing: var(--cc-info);     /* blue   */
    --cc-state-idle: var(--cc-success);    /* green  */
    --cc-state-paused: var(--cc-warning);  /* amber  */
    --cc-state-faulted: var(--cc-danger);  /* red    */
    --cc-state-offline: var(--cc-gray-400);/* gray   */

    /* ---- NOAA space-weather scale (EnvironmentStatus) ---- */
    --cc-noaa-r5: rgba(200, 0, 0, 0.25);
    --cc-noaa-r4: rgba(255, 0, 0, 0.25);
    --cc-noaa-r3: rgba(255, 150, 0, 0.25);
    --cc-noaa-r2: rgba(255, 200, 0, 0.25);
    --cc-noaa-r1: rgba(246, 235, 20, 0.25);
}