/* ═══════════════════════════════════════════════════════════════════
   SIMCO DESIGN TOKENS
   Central theme layer. All page-level CSS should reference these
   variables — re-theming (e.g. SIMCO → ENSPYRE / GANTRY) only requires
   swapping the values in this file (or loading an alternative theme
   file after it).
   Colour values are lifted from the existing app palette — not guessed.
   ═══════════════════════════════════════════════════════════════════ */

:root {
    color-scheme: light;
    /* ── Brand ─────────────────────────────────────────────── */
    --brand-primary:        #7DC142;   /* SIMCO green (existing) */
    --brand-primary-hover:  #70B437;
    --brand-primary-active: #64A22F;
    --brand-primary-soft:   #EDF7E6;
    --brand-primary-border: #C9E5B8;
    --brand-on-primary:     #12200F;
    /* Accessible green for small action/link text on white surfaces.
       WCAG contrast vs --surface-base (#FFFFFF) = 4.97:1 (AA normal text).
       Do not lighten without re-verifying >= 4.5:1. */
    --brand-link:           #2E7E54;
    --brand-accent:         #2E7E54;
    --focus-ring:           #2E7E54;
    /* Three-green hierarchy: signal, action, and quiet supporting wash. */
    --green-signal:         #7DC142;
    --green-action:         #2E7E54;
    --green-deep:           #1F4934;
    --green-wash:           #EDF7E6;

    /* ── Customer-facing contract ──────────────────────────────
       Public web, email-safe HTML and quote PDFs mirror these values.
       Email/PDF code must keep literal fallbacks because those formats cannot
       consume CSS variables. */
    --customer-canvas:      #F7F5F0;
    --customer-canvas-deep: #EFECE4;
    --customer-surface:     #FFFFFF;
    --customer-ink:         #26291F;
    --customer-ink-soft:    #5B5F52;
    --customer-ink-faint:   #8B8F80;
    --customer-line:        #E2DED2;
    --customer-line-strong: #CFCABA;
    --customer-green:       #4F7D18;
    --customer-green-hover: #3E6212;
    --customer-green-soft:  #EEF4E3;

    /* ── Surfaces (3-level charcoal hierarchy, no pure black) ─ */
    --surface-canvas:   #F4F6F2;
    --surface-base:     #FFFFFF;
    --surface-panel:    #FFFFFF;
    --surface-elevated: #FFFFFF;
    --surface-subtle:   #F8FAF7;
    --surface-muted:    #EEF2ED;
    --surface-hover:    #E9EEE8;
    --surface-selected: #EDF7E6;
    --surface-inset:    #F8FAF7;
    --nav-canvas: #17221E;
    --nav-surface: #24302B;
    --nav-hover: #2C3933;
    --nav-text: #EAF0EC;
    --nav-text-muted: #A9B6AF;

    /* ── Text (warm off-white, not pure white) ───────────────── */
    --text-primary:   #18221E;
    --text-secondary: #4F5E57;
    --text-muted:     #718078;
    --text-disabled:  #A4ADA8;

    /* ── Borders ─────────────────────────────────────────────── */
    --border-subtle:  #E3E8E3;
    --border-default: #DDE4DE;
    --border-strong:  #BEC9C0;

    /* ── Status (de-saturated premium variants) ──────────────── */
    --status-scheduled:        #3578C8;
    --status-scheduled-soft:   rgba(53,120,200,.08);
    --status-in-progress:      #C78318;
    --status-in-progress-soft: rgba(199,131,24,.08);
    --status-completed:        #31875A;
    --status-completed-soft:   rgba(49,135,90,.08);
    --status-cancelled:        #75817B;
    --status-cancelled-soft:   rgba(117,129,123,.08);
    --status-assessment:       #8056B3;
    --status-assessment-soft:  rgba(128,86,179,.08);
    --status-regular:          #68A936;
    /* Scheduler card washes: status is carried by the edge, not a saturated fill */
    --status-scheduled-wash:   rgba(91, 150, 232, 0.045);
    --status-in-progress-wash: rgba(232, 163, 61, 0.045);
    --status-completed-wash:   rgba(85, 180, 106, 0.045);
    --status-cancelled-wash:   rgba(125, 135, 144, 0.045);
    --status-assessment-wash:  rgba(166, 120, 207, 0.045);

    /* ── Semantic feedback ───────────────────────────────────── */
    --danger:      #e05252;
    --danger-soft: rgba(224, 82, 82, 0.14);
    --warning:      #e8a33d;
    --warning-soft: rgba(232, 163, 61, 0.14);
    --success:      #55b46a;
    --success-soft: rgba(85, 180, 106, 0.14);
    --info:         #5b96e8;
    --info-soft:    rgba(91, 150, 232, 0.14);

    /* ── Shadows (restrained) ────────────────────────────────── */
    --shadow-sm: 0 1px 2px rgba(20,32,26,.06);
    --shadow-md: 0 8px 24px rgba(20,32,26,.08);
    --shadow-overlay: 0 8px 24px rgba(20,32,26,.12);

    /* ── Radii (consistent, not oversized) ───────────────────── */
    --radius-sm:   6px;
    --radius-md:   10px;
    --radius-lg:   10px;
    --radius-pill: 9999px;

    /* ── Spacing (8px system) ────────────────────────────────── */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 40px;
    --space-8: 56px;

    /* ── Typography ──────────────────────────────────────────── */
    --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
               Roboto, 'Helvetica Neue', Arial, sans-serif;
    /* Loaded only by opted-in admin templates; public and staff pages keep
       their existing font loading and rendering behavior. */
    --font-admin-ui: var(--font-ui);
    --text-xs:  0.75rem;
    --text-sm:  0.85rem;
    --text-md:  0.95rem;
    --text-lg:  1.1rem;
    --text-xl:  1.35rem;
    --text-2xl: 1.7rem;

    /* ── Motion ──────────────────────────────────────────────── */
    --transition-fast: 130ms ease;
    --transition-med:  180ms ease;
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --transition-fast: 0ms;
        --transition-med:  0ms;
    }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}