/*
 * Banoze ERP admin - design tokens
 * ===========================================================================
 * The design system's single source of values: every colour, type size,
 * weight, spacing step, radius, shadow and stacking layer the admin uses.
 * Loaded FIRST by administrator/include/head.php, so every stylesheet after it
 * can use them.
 *
 * The rules:
 *   - Styles use these tokens, not literal values. A new hard-coded colour,
 *     font size or inline style="" makes
 *     tests/phpunit/characterization/DesignSystemRatchetTest.php fail.
 *   - Need a value that is not here? Add a token HERE (with the role it
 *     plays), then use it. Do not add a near-copy of an existing one: two
 *     greys you cannot tell apart are one token.
 *   - Status colours never take the branch colour; the primary action always
 *     does (staff tell the branches apart by it).
 *
 * Every value was taken from what the admin already used most (2026-09-25
 * inventory: 323 colours, 29 font sizes, 38 spacing values, 29 radii and 31
 * shadows in the admin's own CSS). Where several near-identical values were
 * in use, the token holds the most-used one.
 *
 * Only :root custom properties belong in this file.
 * ===========================================================================
 */

:root {
    /* --- Colour: neutrals - one slate ramp, lightest to darkest ----------- */
    --ui-surface: #ffffff;          /* cards, panels, inputs, table rows */
    --ui-subtle: #f5f7f8;           /* quiet fill: card heads, stripes, filter panels */
    --ui-canvas: #eef1f3;           /* page background behind the cards */
    --ui-border: #d9dfe3;           /* dividers, card and table borders */
    --ui-border-strong: #b9c2c8;    /* form controls, outlined buttons */
    --ui-border-hover: #8d999f;     /* control border under the pointer */
    --ui-faint: #7a858d;            /* placeholders, disabled text */
    --ui-muted: #66727a;            /* secondary text, meta, captions */
    --ui-ink-2: #4b5961;            /* text on tints; the neutral badge */
    --ui-label: #344047;            /* field labels, outlined-button text */
    --ui-ink: #263238;              /* body text */
    --ui-charcoal: #191c20;
    --ui-charcoal-soft: #252a30;
    --ui-text-inverse: #ffffff;     /* text and hairlines on a coloured or dark ground */

    /* --- Colour: brand and interaction ------------------------------------ */
    --ui-logo-red: #ed1c24;         /* the logo only - never a UI state */
    --ui-brand: #c9151d;            /* legacy: exec-dashboard.css and reports.css still use it */
    --ui-brand-dark: #9f1117;       /* legacy: as above */
    --ui-blue: #3d6075;             /* metric tiles on the dashboard */
    /*
     * One colour for "do the thing": the SITE's colour, and never red.
     *
     * Until 2026-09-24 the primary (.btn-warning) was brand red and .btn-danger
     * a near-identical red, so Assign Driver and Cancel Order looked the same.
     * Red now means destructive and nothing else; the brand red stays in the
     * logo. The primary is the branch accent (--ui-branch, set per request by
     * include/header.php from config/sites/<site>.php) because staff keep
     * several branches open in tabs all day, and the colour of every main
     * button is the cue that says which branch a screen belongs to. White on
     * each accent: Birmingham teal 5.5:1, London blue 6.7:1, Manchester amber
     * 5.0:1 - all AA. Hover/border are the accent darkened; the navy is only
     * the fallback if --ui-branch were ever unset.
     */
    --ui-primary: var(--ui-branch, #1f4e79);
    --ui-primary-hover: color-mix(in srgb, var(--ui-branch, #1f4e79) 80%, #000);
    --ui-primary-border: color-mix(in srgb, var(--ui-branch, #1f4e79) 72%, #000);
    --ui-link: #1c5e91;
    /* The site colour (--ui-branch, set by include/header.php): a focused field
       carries the same cue as the primary buttons. Never red - a red ring on a
       field reads as an error - and none of the three accents is: teal 5.5:1,
       blue 6.7:1, amber 5.0:1 on white, all above the 3:1 non-text minimum.
       #2b6cb0 (5.4:1) only if --ui-branch were ever unset. */
    --ui-focus: var(--ui-branch, #2b6cb0);
    --ui-focus-glow: color-mix(in srgb, var(--ui-focus) 18%, transparent);

    /* --- Colour: status - fixed on every branch ----------------------------
       Each status has a solid (buttons, rails), an ink (text on its tint), a
       tint (badge and message fill) and a line (badge and message border).
       Inks are >= 6.5:1 on their tints. */
    --ui-success: #2f6f35;
    --ui-success-ink: #1f5d27;
    --ui-success-tint: #e8f4ea;
    --ui-success-line: #b8dcbf;

    --ui-danger: #9f1239;           /* destructive actions only */
    --ui-danger-hover: #861031;
    --ui-danger-border: #720d29;    /* 72% toward black, as --ui-primary-border */
    --ui-danger-ink: #8a1f2f;
    --ui-danger-tint: #fbeaee;
    --ui-danger-wash: #fff4f5;      /* large danger areas: messages, invalid fields */
    --ui-danger-line: #ebbfc8;

    --ui-warning: #b86a12;
    --ui-warning-ink: #7a4a06;
    --ui-warning-tint: #fdf3e3;
    --ui-warning-line: #ecd3a6;

    --ui-info-ink: #1d4f8a;
    --ui-info-tint: #eaf2fb;
    --ui-info-line: #bcd3ee;

    --ui-neutral-tint: #eceff1;     /* ink: --ui-ink-2 */
    --ui-neutral-line: #d3d9dd;

    /* Printed/exported reports retain the original Bootstrap row palette.
       SpreadsheetReportPalette() mirrors these for offline Excel/DOC files;
       tests/spreadsheet_colour_test.php checks that they stay identical. */
    --ui-report-active: #f5f5f5;
    --ui-report-success: #dff0d8;
    --ui-report-info: #d9edf7;
    --ui-report-warning: #fcf8e3;
    --ui-report-danger: #f2dede;

    /* Order statuses beyond the five above (.ui-status-*). */
    --ui-status-approval-ink: #55309a;
    --ui-status-approval-tint: #f3eefc;
    --ui-status-approval-line: #d8c9f1;
    --ui-status-unpaid-ink: #933510;
    --ui-status-unpaid-tint: #fdefe7;
    --ui-status-unpaid-line: #f0c7b0;
    --ui-status-partial-ink: #0b5f6a;
    --ui-status-partial-tint: #e6f5f7;
    --ui-status-partial-line: #b3dde2;

    /* Orders list: a row whose order has a sale return (.ui-row-returned).
       Fuchsia, because every other hue already means something: teal, blue
       and amber are the branch colours, red is cancelled/destructive, and
       purple, orange, green and grey are status pills. */
    --ui-returned-tint: #fbeffb;
    --ui-returned-tint-hover: #f5e0f6;
    --ui-returned-line: #a21caf;     /* the row's left edge */

    /* Manage Customers: an inactive customer's row (.ui-row-inactive). Slate, the
       neutral ramp's hue, a step darker than the zebra stripe and the row hover so
       the row reads as set aside rather than hovered. Ink stays --ui-ink (>= 11:1). */
    --ui-inactive-tint: #e6eaed;
    --ui-inactive-tint-hover: #dce2e6;
    --ui-inactive-line: #7b8890;     /* the row's left edge */

    /* --- Type ---------------------------------------------------------------
       Pixels, not rem: Bootstrap 3 pins html at 10px. */
    /* Macs keep Helvetica Neue - the face every width in the admin was tuned
       against (the orders columns, the sidebar labels). Windows has no
       Helvetica Neue, and maps "Helvetica" to Arial via FontSubstitutes, so
       the old stack gave every Windows PC Arial; Segoe UI now comes first
       there. */
    --ui-font: "Helvetica Neue", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --ui-font-mono: SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    --ui-font-print: Arial, Helvetica, sans-serif;
    --ui-font-icon: FontAwesome;    /* Font Awesome 4.7, bundled in css/font-awesome.min.css */

    --ui-fs-2xs: 11px;              /* overlines, uppercase labels, badges */
    --ui-fs-xs: 12px;               /* meta, help text, small buttons */
    --ui-fs-sm: 13px;               /* tables, sidebar, dense UI */
    --ui-fs-base: 14px;             /* body, inputs, buttons */
    --ui-fs-md: 16px;               /* card and section titles */
    --ui-fs-lg: 18px;               /* page title on small screens */
    --ui-fs-xl: 20px;               /* page title */
    --ui-fs-2xl: 24px;              /* headline figures */
    --ui-fs-display: 30px;          /* KPI figures */

    --ui-fw-regular: 400;
    --ui-fw-semibold: 600;          /* labels, buttons, navigation */
    --ui-fw-bold: 700;              /* titles, table headers, figures, badges */

    --ui-lh-solid: 1;               /* icons and single-line figures */
    --ui-lh-tight: 1.2;             /* figures, badges, large titles */
    --ui-lh-snug: 1.35;             /* labels, table cells, titles */
    --ui-lh-body: 1.5;              /* running text */

    --ui-tracking-overline: .06em;  /* uppercase labels */
    --ui-tracking-display: -.02em;  /* large figures */

    /* Icon glyph sizes (Font Awesome is sized with font-size). */
    --ui-icon-2xs: 8px;             /* chevrons, dots */
    --ui-icon-xs: 10px;             /* small inline glyphs */
    --ui-icon-md: 15px;             /* row action icons */
    --ui-icon-lift: .07em;          /* Font Awesome 4 glyphs render ~1/14 em low when centred */
    --ui-icon-lift-chevron: .2em;   /* the chevron glyphs sit lower still */

    /* --- Space (named by their pixel value) --------------------------------
       A 2px grid to 20, then 24 / 28 / 32. Padding, margin and gap use these;
       1px hairlines and layout offsets larger than 32px are not spacing. */
    --ui-space-2: 2px;
    --ui-space-4: 4px;
    --ui-space-6: 6px;
    --ui-space-8: 8px;
    --ui-space-10: 10px;
    --ui-space-12: 12px;
    --ui-space-14: 14px;
    --ui-space-16: 16px;
    --ui-space-18: 18px;
    --ui-space-20: 20px;
    --ui-space-24: 24px;
    --ui-space-28: 28px;
    --ui-space-32: 32px;

    /* --- Shape --------------------------------------------------------------- */
    --ui-control-height-xs: 28px;   /* row-action buttons (.btn-xs) */
    --ui-control-height-sm: 32px;   /* header and export-group buttons (.btn-sm) */
    --ui-control-height: 38px;      /* inputs, selects, default buttons */
    --ui-control-height-lg: 44px;   /* the one action of a screen (.btn-lg) */
    --ui-action-size: 30px;         /* square icon buttons: row actions, the column chooser */
    --ui-filter-column: 160px;      /* narrowest filter-panel field; a panel fits as many as it can */
    --ui-form-width: 912px;         /* add/edit forms: one readable width, left-aligned */
    --ui-card-inset: 18px;          /* a card's side padding, so every card's text shares one left edge */
    --ui-card-gap: 16px;            /* between stacked cards */
    --ui-radius-xs: 3px;            /* badges, chips, kbd */
    --ui-radius-sm: 5px;            /* controls: buttons, inputs, action icons */
    --ui-radius-md: 8px;            /* cards, panels, dropdowns */
    --ui-radius-lg: 12px;           /* large shell surfaces: the login box */
    --ui-radius-pill: 999px;
    --ui-radius-round: 50%;
    --ui-rail-width: 3px;           /* accent rails on the edge of a surface */

    /* --- Elevation ------------------------------------------------------------ */
    --ui-shadow-xs: 0 1px 2px rgba(38, 50, 56, .06);    /* hairline lift */
    --ui-shadow-sm: 0 2px 7px rgba(38, 50, 56, .07);    /* resting cards */
    --ui-shadow-md: 0 8px 20px rgba(38, 50, 56, .12);   /* hover lift, flyouts */
    --ui-shadow-lg: 0 12px 32px rgba(25, 28, 32, .18);  /* overlays, dropdowns */
    --ui-ring: 0 0 0 1px var(--ui-focus), 0 0 0 4px var(--ui-focus-glow);  /* a focused field: 2px line + soft halo */

    /* --- Layers ------------------------------------------------------------------ */
    --ui-z-dropdown: 1000;          /* pickers, autocomplete */
    --ui-z-backdrop: 1030;          /* mobile sidebar backdrop */
    --ui-z-drawer: 1035;            /* mobile sidebar */
    --ui-z-topbar: 1040;            /* fixed application bar */
    --ui-z-popover: 1100;           /* account menu */
}

/* color-mix is Chrome/Edge 111+, Safari 16.2+, Firefox 113+. A var() inside it
   fails at computed-value time (to the property's initial value, i.e. no
   background), so older browsers need the tokens redefined, not a two-line
   fallback in each rule. There the hover is simply the accent itself. */
@supports not (background: color-mix(in srgb, red 50%, #000)) {
    :root {
        --ui-primary-hover: var(--ui-branch, #183e61);
        --ui-primary-border: var(--ui-branch, #173b5c);
        --ui-focus-glow: rgba(43, 108, 176, .14);
    }
}

/* --- Branch-derived tokens: sidebar field ----------------------------------
   Everything derives from --ui-branch (set per request by
   administrator/include/header.php from config/sites/<site>.php).

   deep = the sidebar field: 62% accent over near-black. The raw accent cannot
          carry the sidebar's muted text tiers - on amber, pure white is only
          5.02:1, so the whole 8-step hierarchy would have to collapse.
   tint = hover. A LIFT toward the accent, preserving today's idiom (the
          shipped hover #2b3036 is lighter than its #191c20 ground).
   The active row uses var(--ui-branch) RAW, so full chroma survives even on
   the no-color-mix fallback path.

   Foregrounds are white ALPHAS, not greys: alpha composites against whatever
   ground it lands on, so one ladder serves all three accents. A fixed grey
   cannot - 4.5:1 needs 76% white on blue but 93% on amber.                  */
:root {
    --ui-branch-deep: color-mix(in srgb, var(--ui-branch, #66727a) 62%, #0d1014);
    --ui-branch-tint: color-mix(in srgb, var(--ui-branch, #66727a) 82%, #0d1014);
    --sb-fg2:  rgba(255, 255, 255, .86);  /* submenu links, icons     >=4.5 */
    --sb-fg3:  rgba(255, 255, 255, .72);  /* section label, footer    >=4.5 */
    --sb-fg4:  rgba(255, 255, 255, .58);  /* chevron, submenu dot     >=3.0 */
    --sb-line: rgba(255, 255, 255, .22);  /* decorative dividers only       */
    --sb-edge: rgba(255, 255, 255, .48);  /* control boundary         >=3.0 */
    --sb-ok:   #7fd18a;                   /* footer "live" dot        >=3.0 */
}

/* This MUST be an @supports block redefining the tokens, NOT the usual
   two-declaration `background: X; background: color-mix(...)` trick: a
   declaration containing var() is valid at PARSE time and only fails at
   computed-value time, where it resolves to the property's INITIAL value.
   The sidebar would go fully transparent rather than falling back to charcoal.
   Must follow the :root above - equal specificity, source order decides.    */
@supports not (background: color-mix(in srgb, red 62%, #0d1014)) {
    :root {
        --ui-branch-deep: #191c20;   /* today's --ui-charcoal */
        --ui-branch-tint: #2b3036;   /* today's hover         */
    }
}

/* --- Branch-derived tokens: page-header bar --------------------------------
   A light tint of the site colour behind the page title, and its border.
   Without color-mix the tint and line fall back to white and the border grey;
   the bar's top edge still carries the colour. */
:root {
    --ui-branch-wash: color-mix(in srgb, var(--ui-branch, #66727a) 9%, #fff);
    --ui-branch-line: color-mix(in srgb, var(--ui-branch, #66727a) 24%, #fff);
}

@supports not (background: color-mix(in srgb, red 9%, #fff)) {
    :root {
        --ui-branch-wash: #fff;
        --ui-branch-line: #d9dfe3;
    }
}