/*
 * Warehouse Management design tokens: the single source of the --wm-* custom properties for Web, Handheld and Wallboard.
 *
 * Linked by every host before its own stylesheet:
 *   <link rel="stylesheet" href="_content/WarehouseManagement.Presentation.Shared/css/wm-tokens.css" />
 *
 * Host stylesheets use these tokens and must not redefine them. A host that truly needs a different value for a token
 * overrides it in its own :root block and says why (see Handheld app.css for --wm-colour-status-held and the Wallboard
 * wallboard.css dark theme for the priority and lane colours).
 */

:root {
    /* area / workflow colours (owner, 12 October 2026): every one carries WHITE text at 4.5:1 or better (WCAG AA), so a header, a menu
       tile and an outlined strategy badge (the colour as text on white) all read. Solid fills are for headers, navigation tiles and
       strategy badges only */
    --wm-colour-workflow-inbound: #b85a12;
    --wm-colour-workflow-outbound: #6a42a8;
    --wm-colour-workflow-move: #00796b;
    --wm-colour-workflow-count: #a8287f;
    --wm-colour-workflow-inventory: #4169a1;
    /* graphite (owner, 12 October 2026; was rose #b54d6c): darker than the Created status grey #6c757d, neutral beside Inventory's blue */
    --wm-colour-workflow-warehouse: #4f5b66;

    /* priority colours */
    --wm-colour-priority-urgent: #dc3545;
    --wm-colour-priority-high: #163a5f;
    --wm-colour-priority-medium: #315a7d;
    --wm-colour-priority-low: #607d94;

    /* status colours */
    --wm-colour-status-created: #6c757d;
    --wm-colour-status-assigned: #2563a6;
    /* active / in progress is the Bootstrap warning yellow: white does not read on it, so it carries the dark ink below (the one status that does) */
    --wm-colour-status-active: #ffc107;
    --wm-colour-status-active-contrast: #212529;
    --wm-colour-status-inprogress: var(--wm-colour-status-active);
    --wm-colour-status-completed: #198754;
    --wm-colour-status-cancelled: #dc3545;
    --wm-colour-status-held: #000;
    --wm-colour-status-failed: #842029;

    /* how much darker a coloured button gets on hover / active */
    --wm-colour-hover-darken: 12%;
    --wm-colour-active-darken: 22%;

    /* red / amber / green: a solid fill with the text colour that reads on it (KpiTile badge and rail) */
    --wm-rag-green: #17795f;
    --wm-rag-green-contrast: #ffffff;
    --wm-rag-amber: #f0a202;
    --wm-rag-amber-contrast: #3b2600;
    --wm-rag-red: #b0203c;
    --wm-rag-red-contrast: #ffffff;

    /* red / amber / green as text and outline on a pale tint (the kiosk board, read from across a room) */
    --wm-rag-green-ink: #17803d;
    --wm-rag-green-tint: #dcf3e3;
    --wm-rag-amber-ink: #b97800;
    --wm-rag-amber-tint: #fff0c2;
    --wm-rag-red-ink: #c62828;
    --wm-rag-red-tint: #fde0e0;

    /* small dashboard charts (Sparkline): hosts with their own themes (the wallboard) map these onto it */
    --wm-chart-accent: var(--wm-colour-status-assigned);
    --wm-chart-track: #cfd7e1;
    --wm-chart-text: #14202e;
    --wm-chart-muted: #5b6978;

    /* demo mode: the banner (every app) and the corner marker (the wallboard): a strong amber that reads as "this is not real" */
    --wm-colour-demo: #b45309;
    --wm-colour-demo-contrast: #ffffff;

    /* shape */
    --wm-radius: 12px;
}