/* ═══════════════════════════════════════════════════════════════
   CCP (CorpComPrint) Brand Tokens — CSS custom properties only.
   No SCSS / build step (Brian + Sydney, 2026-07-11).

   Canonical source (Duane, 2026-09-01): StyleLibrary/ — the client's (Corporate
   Communications Center, Inc., "CCC") own authored design artifacts. Values below are
   transcribed from StyleLibrary's color ramps; see architecture/DESIGN-SYSTEM.md for the
   full swatch-by-swatch mapping and contrast findings. This supersedes the palette that
   used to be sampled from Exhibit A mockup screenshots — that claim ("no separate CCC
   brand guide was provided") was wrong; StyleLibrary is that guide, and where it disagrees
   with Exhibit A on a value, StyleLibrary wins.

   RESOLVED (Brian, 2026-07-11): one primary app-wide, no screen keeps teal — unchanged in
   structure by the StyleLibrary swap above, only in hue value (see DESIGN-SYSTEM.md §8.6).

   RESOLVED (Brian, 2026-07-11): the Work Management main.png renders
   every Kanban stage badge as the same neutral gray pill; the
   --brand-status-* tokens below instead color-code each state by reusing
   the semantic colors the mockups use elsewhere for the same meaning
   (priority badges, QA/alert cards, grid badges). Delivered is ruled
   distinct from Production Completed — see the --brand-status-delivered-*
   comment below for the darker-green pairing and contrast check.
   ═══════════════════════════════════════════════════════════════ */

:root {
    /* ── Brand / primary — StyleLibrary Primary ramp (DESIGN-SYSTEM.md §2.1). 600 is the
       general-purpose primary (links, active nav, focus rings); solid button fills use 700/800 —
       see .btn-primary/.form-btn-primary in theme.css/shared.css and --brand-primary-active below.
       Primary-500 (#3D7FA1) fails 4.5:1 contrast against white and must never carry text. ── */
    --brand-primary: #256F95;
    --brand-primary-rgb: 37, 111, 149; /* keep in sync with --brand-primary — Bootstrap's rgba(var(--bs-*-rgb), a) usage needs a bare R, G, B triple */
    --brand-primary-hover: #0D5F89;
    --brand-primary-hover-rgb: 13, 95, 137; /* keep in sync with --brand-primary-hover */
    --brand-primary-light: #CFDFE7;
    --brand-primary-lighter: #E7EFF3;
    /* Primary-800 — solid button hover/active fill (DESIGN-SYSTEM.md §4.1); NEW token. */
    --brand-primary-active: #004670;
    /* CCC's own values for the two tokens a customer's brand can override (the Brands screens draw swatches and a preview from them). */
    --brand-on-primary: #FFFFFF;
    --brand-accent: var(--brand-accent-cyan);

    /* Secondary accent — StyleLibrary Violet-600/50/700 (§2.2) */
    --brand-accent-indigo: #6F46E7;
    --brand-accent-indigo-bg: #EAE3FD;
    --brand-accent-indigo-text: #5F36D6;

    /* Tertiary accent — StyleLibrary Bright Teal-800/25/900 (§2.2) */
    --brand-accent-cyan: #14AE94;
    --brand-accent-cyan-bg: #C9FDF5;
    --brand-accent-cyan-text: #0C957E;

    /* Secondary (navy) — StyleLibrary Primary-850/800, the deep-navy end of the client's own
       Primary ramp (§2.2); the old navy was ccc-theme legacy with no StyleLibrary equivalent. */
    --brand-secondary: #002C56;
    --brand-secondary-light: #004670;

    /* L-258 — architecture/DESIGN-SYSTEM-EXTERNAL-SURFACES.md §3's portal-only alias: the customer portal's
       one dark-navy "Order Totals" card (shipped.png / in-production.png). Alias only, not a new value — the
       dark totals card is a portal-only surface, but its colour is this same staff secondary navy. Consumed
       via the .app-card--order-totals class (shared-page.css), never inline in a .razor file. */
    --brand-order-totals-bg: var(--brand-secondary);

    /* ── Neutrals / surfaces / borders — StyleLibrary Text/Text Light ramps + Base Black
       (§2.3). --brand-surface stays true white (Base White is an overlay opacity ramp, not a
       page/card surface); --brand-border and --brand-border-strong have no StyleLibrary
       equivalent and stay as sampled — not worth a repaint on no evidence. ───────────────── */
    --brand-surface: #FFFFFF;
    --brand-surface-page-bg: #F9F9FB;
    --brand-surface-sidebar-bg: #181818;
    --brand-surface-sidebar-active-bg: var(--brand-primary);
    --brand-surface-sidebar-active-hover: #1E293B;
    --brand-surface-sidebar-divider: rgba(255, 255, 255, 0.08);
    --brand-surface-sidebar-overlay: rgba(255, 255, 255, 0.1);
    --brand-surface-sidebar-overlay-strong: rgba(255, 255, 255, 0.5);
    /* The mobile menu toggle's three-bar icon. A stroke colour cannot reference a custom property inside a data URI, so the whole image is the token. */
    --brand-surface-sidebar-toggler-icon: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    --brand-border: #E5E7EB;
    --brand-border-strong: #D1D5DB;

    --brand-text: #222729;
    --brand-text-muted: #667178;
    --brand-text-subtle: #7D8A92;
    --brand-text-on-brand: #FFFFFF;

    /* ── Semantic status colors — StyleLibrary Success/Error/Warning ramps (§2.4). Solids use
       one step darker than the sheet's own solid-toast column (700/850 instead of 600/500) —
       the sheet's own hues fail 4.5:1 white-text contrast at those steps; see DESIGN-SYSTEM.md
       §6 for the measured ratios. ─────────────────────────────────────────────────────────── */
    --brand-success: #197649;
    --brand-success-rgb: 25, 118, 73; /* keep in sync with --brand-success */
    --brand-success-bg: #BBF1D7;
    --brand-success-text: #115434;

    /* Paler success tint for the PricingRules current-version row highlight (#F2FBF5 in the demo PoC — too
       far from --brand-success-bg to reuse without a visible shift) */
    --brand-success-soft-bg: #F2FBF5;

    --brand-danger: #D52D23;
    --brand-danger-rgb: 213, 45, 35; /* keep in sync with --brand-danger */
    --brand-danger-bg: #FFDFDD;
    --brand-danger-text: #B61A11;

    --brand-warning: #CE8B27;
    --brand-warning-rgb: 206, 139, 39; /* keep in sync with --brand-warning */
    --brand-warning-bg: #FDEFD9;
    --brand-warning-text: #8D5E16;
    --brand-warning-border: #FADEB3;

    /* Softer amber variant used only by the admin alert-section wrapper (ccc-theme.css leftover) */
    --brand-warning-soft-bg: #FEF7EC;
    --brand-warning-soft-border: #F8D5A0;

    /* Customer ageing tiles' corrected middle-of-the-warning-family steps (git show 7f0616da:backlog/MOCKUP-SPEC-CUSTOMER-AGEING-TILES.md
       §3, DESIGN-SYSTEM.md §2, corrected 2026-09-01 after Will's visual-inspection FAIL: 31-60/61-90 previously
       shared one fill with 1-30, so position — not colour — carried the middle three buckets). Ramp steps
       25 -> 150 -> 300 (deliberately skipping 50, which measured only 1.07:1 from 25), text darkening in step
       (800 -> 900 -> 950) as a second cue — Warning-800 fails AA on these darker fills (4.28:1 / 3.47:1), so
       the darker text pairing is the thing that keeps them compliant, not decoration. Platform-contract
       additions (card #231 rider 1: additions only, no version bump needed). */
    --brand-warning-mid-bg: #FADEB3;
    --brand-warning-mid-text: #6D470E;
    --brand-warning-strong-bg: #F5C47B;
    --brand-warning-strong-text: #5C3B0A;

    /* Same value as --brand-primary in this palette (StyleLibrary never distinguishes an "info" hue from
       brand blue) — referenced rather than re-declared so the color still lives exactly once. */
    --brand-info: var(--brand-primary);
    --brand-info-rgb: var(--brand-primary-rgb);
    --brand-info-bg: #E7EFF3;
    --brand-info-text: #004670;

    --brand-neutral-bg: #F1F3F5;
    --brand-neutral-text: #394044;

    /* Quote/Proposal screens vs. Order screens (product owner, second round of quote-screen feedback):
       AISv2's `.proposal { background: #EDF5FF; }` tints its quote-editing panel apart from Order's plain
       white one. Reuses --brand-primary-lighter (#EFF6FF) rather than a new hex literal — the closest existing
       token to AISv2's reference value, visually equivalent at this saturation. Referenced, not re-declared,
       same as --brand-info above. */
    --brand-quote-bg: var(--brand-primary-lighter);

    /* ── Kanban status-badge tokens ───────────────────────────────────
       The Work Management Main board (main.png) currently renders every
       stage badge in the same neutral pill (--brand-neutral-bg/text) — it is
       not yet color-coded per status. The per-status colors below are a
       documented interpretation for tonight's Kanban Blick, built by
       reusing the semantic colors the mockups DO use elsewhere for the
       same meaning (priority/alert/QA badges above), so new screens read
       consistently with the rest of Exhibit A. */
    --brand-status-created-bg: var(--brand-neutral-bg);
    --brand-status-created-text: var(--brand-neutral-text);
    --brand-status-print-ready-bg: var(--brand-info-bg);
    --brand-status-print-ready-text: var(--brand-info-text);

    --brand-status-in-production-bg: var(--brand-primary-light);
    --brand-status-in-production-text: var(--brand-primary-hover);

    /* Address Book's "Default Shipping/Billing Address" label (01-address-book-shipment-tracking.draft.md AB.2
       row 2, EXTERNAL §4.6): soft primary pill. Same values as the pair above — the closest existing tint —
       under their own name so a reader of the Address Book markup finds a name that matches what it labels. */
    --brand-status-default-address-bg: var(--brand-primary-light);
    --brand-status-default-address-text: var(--brand-primary-hover);

    /* Vendor dashboard row badges (DESIGN-SYSTEM.md §4.3a, vendor-portal U4) — references only, same
       "lifecycle status by reference to an existing semantic pair" rule as Active/Draft/Archived below.
       Pending Quote and Pending Review are unfinished work awaiting a party's action, the same reading Draft
       gets; Approved is the success pair. */
    --brand-status-pending-quote-bg: var(--brand-warning-bg);
    --brand-status-pending-quote-text: var(--brand-warning-text);

    --brand-status-pending-review-bg: var(--brand-warning-bg);
    --brand-status-pending-review-text: var(--brand-warning-text);

    --brand-status-approved-bg: var(--brand-success-bg);
    --brand-status-approved-text: var(--brand-success-text);

    /* Staff estimates inbox (admin quoting Story 1, S1.2): a customer quote request with an estimator assigned -- the success pair by reference, a lifecycle status of its own rather than an alias of Approved. */
    --brand-status-assigned-bg: var(--brand-success-bg);
    --brand-status-assigned-text: var(--brand-success-text);

    /* U1 (mockup-spec-invoice-submission-payment-tracking.md, wave 2 F7): the vendor-facing "Paid" status pill.
       By reference to the success pair, exactly like Approved — the WORD is what tells the two apart on one
       grid (§2.8 item 4), not the colour. */
    --brand-status-paid-bg: var(--brand-success-bg);
    --brand-status-paid-text: var(--brand-success-text);

    --brand-status-production-completed-bg: var(--brand-success-bg);
    --brand-status-production-completed-text: var(--brand-success-text);

    --brand-status-rework-qa-failed-bg: var(--brand-danger-bg);
    --brand-status-rework-qa-failed-text: var(--brand-danger-text);

    --brand-status-ready-for-shipment-bg: var(--brand-accent-cyan-bg);
    --brand-status-ready-for-shipment-text: var(--brand-accent-cyan-text);

    --brand-status-shipped-bg: var(--brand-accent-indigo-bg);
    --brand-status-shipped-text: var(--brand-accent-indigo-text);

    /* Finance setup page (Finance story 3) per-check status pills: by reference to the success, info, warning and danger pairs. */
    --brand-status-setup-checked-bg: var(--brand-success-bg);
    --brand-status-setup-checked-text: var(--brand-success-text);
    --brand-status-setup-confirmed-bg: var(--brand-info-bg);
    --brand-status-setup-confirmed-text: var(--brand-info-text);
    --brand-status-setup-to-do-bg: var(--brand-warning-bg);
    --brand-status-setup-to-do-text: var(--brand-warning-text);
    --brand-status-setup-could-not-check-bg: var(--brand-danger-bg);
    --brand-status-setup-could-not-check-text: var(--brand-danger-text);

    /* Delivered ruled distinct from Production Completed 2026-07-11 (Brian): stays in the
       success-green family, Success-900 text unchanged. Bg bumped from Success-50 #ACEBCD to
       Success-100 #9DE6C3 (Francie, 2026-09-01, Arthur's design-system-adoption review Q3):
       Success-25/50 (Production Completed vs. Delivered as first specced) are adjacent ramp
       steps that read as the same pale mint side by side at swatch scale — too close to hold
       Brian's at-a-glance-distinct requirement at small Kanban-pill scale. Success-100 is
       visibly more saturated in the same side-by-side check. Contrast well clear of the AA
       4.5:1 floor for badge text either way. */
    --brand-status-delivered-bg: #9DE6C3;
    --brand-status-delivered-text: #0A331F;

    --brand-status-on-hold-bg: var(--brand-warning-bg);
    --brand-status-on-hold-text: var(--brand-warning-text);

    --brand-status-cancelled-bg: var(--brand-neutral-bg);
    --brand-status-cancelled-text: var(--brand-danger-text);

    /* Catalog Product lifecycle (Active/Draft/Archived) — DESIGN-SYSTEM.md §4.3a. References, never values:
       a Product's status is a lifecycle like a work order's, so it is named here rather than borrowing a
       sentiment token at the call site. Draft is amber for the same reason .unpriced-pill is (CCP.CatalogContext.Blick/
       wwwroot/blick.css) — a product that cannot yet be sold is unfinished work. Archived is deliberately NOT
       --brand-status-cancelled-* (whose text is --brand-danger-text): archiving a product is routine
       housekeeping, not the same thing as cancelling a work order. */
    --brand-status-active-bg: var(--brand-success-bg);
    --brand-status-active-text: var(--brand-success-text);

    --brand-status-draft-bg: var(--brand-warning-bg);
    --brand-status-draft-text: var(--brand-warning-text);

    --brand-status-archived-bg: var(--brand-neutral-bg);
    --brand-status-archived-text: var(--brand-neutral-text);

    --brand-status-pending-invitation-bg: var(--brand-warning-bg);
    --brand-status-pending-invitation-text: var(--brand-warning-text);

    /* ServiceRequestForQuote vendor-assignment statuses (mockup-spec-vendor-rfq-response.md §3.2's status ->
       badge-variant table). Quoted reuses the in-production pair (primary, "in flight, awaiting CCC"); Awarded
       is the success pair; Not Awarded reuses the archived pair (neutral -- "terminal, no severity, losing is
       not an error", the spec's own words). Pending Quote already has --brand-status-pending-quote-*. */
    --brand-status-quoted-bg: var(--brand-primary-light);
    --brand-status-quoted-text: var(--brand-primary-hover);

    /* Staff Service RFQ request status (02-vendor-management-rfq.draft.md Story 3 §S3.3, G-4) — a NAMED pair of
       its own even though it references the same primitives as --brand-status-quoted-* above: Issued is a
       REQUEST-level status, Quoted is a per-vendor-assignment status, and the two must be free to diverge later
       without one silently repainting the other. Draft/Awarded/Cancelled/Unknown reuse existing pairs. */
    --brand-status-issued-bg: var(--brand-primary-light);
    --brand-status-issued-text: var(--brand-primary-hover);

    --brand-status-awarded-bg: var(--brand-success-bg);
    --brand-status-awarded-text: var(--brand-success-text);

    --brand-status-not-awarded-bg: var(--brand-neutral-bg);
    --brand-status-not-awarded-text: var(--brand-neutral-text);

    /* Declined (a vendor's own "Decline to quote", 02-rfq-response-job-management.draft.md Story 3 "Screen criteria") -- a settled state like Not Awarded, so the neutral pair by reference, no new value. */
    --brand-status-declined-bg: var(--brand-neutral-bg);
    --brand-status-declined-text: var(--brand-neutral-text);

    /* QuickBooks Online connection lifecycle (story_quickbooks-intuit-standard-spec.md §9, DESIGN-SYSTEM.md §4.3a).
       References, never values -- Revoked reuses --brand-status-cancelled-* above, no new pair. */
    --brand-status-connected-bg: var(--brand-success-bg);
    --brand-status-connected-text: var(--brand-success-text);
    --brand-status-not-connected-bg: var(--brand-neutral-bg);
    --brand-status-not-connected-text: var(--brand-neutral-text);
    --brand-status-expired-bg: var(--brand-warning-bg);
    --brand-status-expired-text: var(--brand-warning-text);

    /* Lifecycle statuses added 2026-10-07 (DESIGN-SYSTEM.md §4.3): each its own pair, defined by reference to an existing semantic pair. */
    --brand-status-unpaid-bg: var(--brand-warning-bg);
    --brand-status-unpaid-text: var(--brand-warning-text);
    --brand-status-partly-paid-bg: var(--brand-info-bg);
    --brand-status-partly-paid-text: var(--brand-info-text);
    --brand-status-in-stock-bg: var(--brand-success-bg);
    --brand-status-in-stock-text: var(--brand-success-text);
    --brand-status-low-stock-bg: var(--brand-warning-bg);
    --brand-status-low-stock-text: var(--brand-warning-text);
    --brand-status-out-of-stock-bg: var(--brand-danger-bg);
    --brand-status-out-of-stock-text: var(--brand-danger-text);
    --brand-status-sent-bg: var(--brand-info-bg);
    --brand-status-sent-text: var(--brand-info-text);
    --brand-status-revision-requested-bg: var(--brand-warning-bg);
    --brand-status-revision-requested-text: var(--brand-warning-text);
    --brand-status-converted-bg: var(--brand-status-in-production-bg);
    --brand-status-converted-text: var(--brand-status-in-production-text);
    --brand-status-rejected-bg: var(--brand-neutral-bg);
    --brand-status-rejected-text: var(--brand-neutral-text);
    --brand-status-notice-due-bg: var(--brand-warning-bg);
    --brand-status-notice-due-text: var(--brand-warning-text);
    --brand-status-stale-data-bg: var(--brand-warning-bg);
    --brand-status-stale-data-text: var(--brand-warning-text);

    /* Finance setup checklist (Finance story 3): each state its own pair, by reference to an existing semantic pair. */
    --brand-status-setup-checked-bg: var(--brand-success-bg);
    --brand-status-setup-checked-text: var(--brand-success-text);
    --brand-status-setup-confirmed-bg: var(--brand-info-bg);
    --brand-status-setup-confirmed-text: var(--brand-info-text);
    --brand-status-setup-to-do-bg: var(--brand-warning-bg);
    --brand-status-setup-to-do-text: var(--brand-warning-text);
    --brand-status-setup-could-not-check-bg: var(--brand-danger-bg);
    --brand-status-setup-could-not-check-text: var(--brand-danger-text);

    /* ── Typography — StyleLibrary Typography sheets specify Outfit for headings and body
       (§2.5). Most size steps already matched the sheet's body/heading scale and stay as-is;
       --brand-font-size-md moves to the exact 15px (Text M) step. Outfit's font load lives in
       App.razor; see that file's header comment for the self-hosting mechanism. ──────────── */
    --brand-font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --brand-font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

    --brand-font-size-xs: 0.7rem;
    --brand-font-size-sm: 0.75rem;
    --brand-font-size-base: 0.875rem;
    --brand-font-size-md: 0.9375rem;
    --brand-font-size-lg: 1.125rem;
    --brand-font-size-xl: 1.5rem;
    --brand-font-size-2xl: 1.75rem;
    --brand-font-size-3xl: 2rem;

    --brand-font-weight-regular: 400;
    --brand-font-weight-medium: 500;
    --brand-font-weight-semibold: 600;
    --brand-font-weight-bold: 700;

    /* NEW — StyleLibrary specifies line heights, the palette above had none (§2.5). One
       pragmatic token per family rather than one per size step. */
    --brand-line-height-body: 1.43;
    --brand-line-height-heading: 1.25;

    /* ── Spacing scale (4px base, sampled from card padding/gaps across
       all Work Management dashboards) ──────────────────────────────── */
    --brand-space-1: 4px;
    --brand-space-2: 8px;
    --brand-space-3: 12px;
    --brand-space-4: 16px;
    --brand-space-5: 20px;
    --brand-space-6: 24px;
    --brand-space-8: 32px;
    --brand-space-9: 48px;

    /* One outer height for every single-line control (text box, select, Syncfusion input/dropdown/date picker, button) in forms
       and table rows alike (Olga, 2026-10-07, card #2). A SIZE token, not a spacing step. The 40px hit-target literals on
       icon-only buttons (DESIGN-SYSTEM.md §4.18a) are a different rule and stay literals. Applied once, in theme.css. */
    --brand-control-height: 40px;

    /* ── Radii / shadows (sampled from kanban cards/columns, KPI cards,
       modals — main.png, job-order-manager-dashboard.png, achieve-product.png) */
    --brand-radius-sm: 4px;
    --brand-radius-md: 6px;
    --brand-radius-lg: 8px;
    --brand-radius-pill: 999px;
    /* NEW — StyleLibrary Popups.png modal corner (~16px); consumer: .app-modal (shared.css). */
    --brand-radius-xl: 16px;

    --brand-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
    --brand-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.1);
    --brand-shadow-modal: 0 4px 16px rgba(0, 0, 0, 0.2);
    --brand-shadow-banner: 0 -1px 2px rgba(0, 0, 0, 0.2);

    /* ── Motion (only the two durations actually reused across theme.css/blick.css) ── */
    --brand-transition-fast: 0.15s;
    --brand-transition-base: 0.3s;

    /* ── Z-index (only the one layer that's actually shared/stacked — not a full scale) ── */
    --brand-z-toast: 9999;
}