/* ============================================================
   Kerbside Systems — Design Tokens
   Source: kerbside-brand-guidelines.html (2026 v1)
   Loaded before all other CSS.
   ============================================================ */

:root {

    /* ── BRAND IDENTITY ──────────────────────────────────────
       Hi-vis is the brand colour. Restricted to brand-identity
       moments only: the mark, the dashboard Readiness pill,
       brand-y dashboard cards. Never used for buttons, links,
       active states, or working UI elements.
       ──────────────────────────────────────────────────────── */
    --hivis:            #DCD024;
    --hivis-muted:      #C9B83A;

    /* ── SURFACES ────────────────────────────────────────────
       Warm earthtone palette. Replaces cool SaaS greys.
       ──────────────────────────────────────────────────────── */
    --char:             #1F1F1F;
    --graph:            #2D2D2D;
    --panel:            #E8E6DE;
    --canvas:           #EFEDE5;
    --paper:            #FAF8F2;
    --bone:             #F4F1E8;

    /* ── TEXT NEUTRALS ───────────────────────────────────── */
    --iron:             #5C5C5C;
    --smoke:            #8A8A88;

    /* ── DIVIDERS ────────────────────────────────────────── */
    --line:             rgba(31,31,31,0.10);
    --line-strong:      rgba(31,31,31,0.18);

    /* ── SLATE — PRIMARY UI ACCENT ────────────────────────────
       All working-UI accents: buttons, links, focus rings,
       active states. Replaces the prior #4F8EF7 blue.
       ──────────────────────────────────────────────────────── */
    --slate:            #2C5F7E;
    --slate-hover:      #244F69;
    --slate-soft:       rgba(44,95,126,0.10);

    /* ── STATUS COLOURS ──────────────────────────────────────
       Each status has soft (foreground), background tint,
       and strong (saturated for big elements) variants.
       Soft: pills, dots, thin borders, label text.
       Background: alert panels, avatars, banner fills.
       Strong: stat-card stripes, chart bars, big status text,
       large alert headlines. Rule of thumb: bigger than a pill.
       ──────────────────────────────────────────────────────── */
    --status-up:             #4A8B5C;
    --status-up-bg:          #E8F2EB;
    --status-up-strong:      #2D7A3F;

    --status-due:            #D27535;
    --status-due-bg:         #F8ECE0;
    --status-due-strong:     #B85F1F;

    --status-overdue:        #B53D33;
    --status-overdue-bg:     #F5E2DF;
    --status-overdue-strong: #9B2A22;

    --status-info:           #2A6B8A;
    --status-info-bg:        #E2EDF2;

    /* ── TYPOGRAPHY ──────────────────────────────────────── */
    --font-body:        'Manrope', system-ui, sans-serif;
    --font-mono:        'JetBrains Mono', ui-monospace, monospace;

}