/* ==========================================================================
   KindStock design tokens.

   The single source of truth for color, type, spacing, radius, elevation and
   motion across every surface (app shell, POS/till, kiosk/station, system
   area, customer display). Mirrors the brand system on kindstock.org.

   Three layers, in this file top to bottom:
     1. Brand palette   — raw values. Components must NOT reference these.
     2. Semantic roles  — what components consume. A future dark theme flips
                          ONLY this layer (plus Bootstrap's own dark vars).
     3. Bootstrap bridge — maps semantics onto --bs-* so stock Bootstrap
                          components pick the brand up without class churn.
                          (Added by the theme-flip change; absent = inert.)

   Tenant branding: organisations set --gs-primary/--gs-secondary via a nonced
   inline block in the shells (from org.primary_color/secondary_color). Those
   names are a deployed contract — the token layer CONSUMES them (--ks-accent)
   and never redefines them.

   Gold is semantic, not decorative: a gold number means money HMRC returns
   (Gift Aid). Nothing else in the product may be gold.
   ========================================================================== */

:root {
    /* ---- Layer 1: brand palette ---- */
    --ks-ink-deep: #10251f;        /* deepest forest — chrome depth */
    --ks-forest: #1a3c34;          /* brand primary */
    --ks-forest-mid: #21483e;
    --ks-forest-light: #2d5a4e;
    --ks-sage: #4a7c6f;
    --ks-sage-light: #6a9b8c;
    --ks-sage-mist: #dce6e1;       /* tinted borders, subtle fills */
    --ks-cream: #f8f6f0;           /* page background */
    --ks-cream-dark: #ebe7dc;
    --ks-paper: #fffdf8;           /* card / receipt white */
    --ks-charcoal: #2d2d2d;
    --ks-grey-text: #57574f;

    /* Gift Aid gold — HMRC money ONLY */
    --ks-gold-deep: #8a6418;       /* small text on light surfaces (AA) */
    --ks-gold: #a87b1f;            /* large numerals / icons on light */
    --ks-gold-bright: #e2b25c;     /* text on dark surfaces (AA) */
    --ks-gold-soft: #f4e9d2;       /* pale gold wash */

    /* Functional colors (close to Bootstrap hues so alert semantics read
       the same; --ks-green is the success green already used app-wide) */
    --ks-green: #10b981;
    --ks-green-deep: #0a5132;   /* AA as ink on cream/paper; --ks-green is not */
    --ks-amber: #b45309;
    --ks-orange: #fd7e14;   /* stock-aging "Alert" severity tier */
    --ks-red: #b02a37;
    --ks-blue: #256a8f;

    /* ---- Layer 2: semantic roles ---- */
    --ks-surface: var(--ks-cream);
    --ks-surface-raised: var(--ks-paper);
    --ks-surface-sunken: var(--ks-cream-dark);
    --ks-ink: var(--ks-charcoal);
    --ks-ink-muted: var(--ks-grey-text);
    --ks-ink-faint: #8a8a80;
    --ks-rule: var(--ks-sage-mist);
    --ks-rule-strong: #c3d2cb;
    /* Chrome (sidebar / mobile header / system navbar) follows the tenant
       accent so org branding keeps working; defaults to forest. The deep
       end of the gradient darkens whatever the accent is. */
    --ks-chrome: var(--gs-primary, var(--ks-forest));
    --ks-chrome-deep: var(--ks-ink-deep);
    --ks-chrome-deep: color-mix(in srgb, var(--ks-chrome), #000 38%);
    --ks-on-chrome: #ffffff;
    --ks-on-chrome-muted: rgba(255, 255, 255, 0.65);

    /* Tenant-brandable accent: composes the per-tenant --gs-* injection,
       falling back to the KindStock brand. Static hover/active fallbacks
       precede the color-mix redeclarations for pre-111 Chromium. */
    --ks-accent: var(--gs-primary, var(--ks-forest));
    --ks-accent-soft: var(--gs-secondary, var(--ks-sage));
    --ks-on-accent: #ffffff;
    --ks-accent-hover: #16332c;
    --ks-accent-hover: color-mix(in srgb, var(--ks-accent), #000 14%);
    --ks-accent-active: #132d27;
    --ks-accent-active: color-mix(in srgb, var(--ks-accent), #000 22%);
    --ks-accent-tint: #e9efec;
    --ks-accent-tint: color-mix(in srgb, var(--ks-accent), #fff 88%);

    /* Gift Aid semantics */
    --ks-gift-aid: var(--ks-gold-deep);
    --ks-gift-aid-strong: var(--ks-gold);
    --ks-gift-aid-wash: var(--ks-gold-soft);

    /* Cash-drawer polarity: green/red on money means cash over/short ONLY
       (till variance figures) - never decorative, never Gift Aid (gold law).
       Shortages share the standard negative-money red (.money--neg). */
    --ks-cash-over: var(--ks-green-deep);
    --ks-cash-short: var(--ks-red);

    /* Type */
    --ks-font-body: 'DM Sans', system-ui, -apple-system, sans-serif;
    --ks-font-display: 'Libre Baskerville', Georgia, serif;
    --ks-font-money: 'IBM Plex Mono', 'Courier New', monospace;
    --ks-fs-xs: 0.75rem;
    --ks-fs-sm: 0.875rem;
    --ks-fs-base: 1rem;
    --ks-fs-lg: 1.125rem;
    --ks-fs-xl: 1.375rem;
    --ks-fs-2xl: 1.75rem;
    --ks-fs-3xl: 2.25rem;

    /* Space */
    --ks-sp-1: 0.25rem;
    --ks-sp-2: 0.5rem;
    --ks-sp-3: 0.75rem;
    --ks-sp-4: 1rem;
    --ks-sp-5: 1.5rem;
    --ks-sp-6: 2rem;
    --ks-sp-7: 3rem;

    /* Radii */
    --ks-radius-sm: 4px;
    --ks-radius: 8px;
    --ks-radius-lg: 14px;

    /* Elevation — soft, paper-like (forest-tinted, never pure black) */
    --ks-shadow-sm: 0 1px 2px rgba(16, 37, 31, 0.06), 0 2px 8px rgba(16, 37, 31, 0.05);
    --ks-shadow-md: 0 2px 6px rgba(16, 37, 31, 0.07), 0 10px 28px rgba(16, 37, 31, 0.09);
    --ks-shadow-lg: 0 4px 10px rgba(16, 37, 31, 0.08), 0 24px 48px rgba(16, 37, 31, 0.14);

    /* Motion */
    --ks-transition-fast: 150ms ease;
    --ks-transition: 250ms ease;
}

/* ==========================================================================
   Layer 3: Bootstrap 5.3.2 bridge.

   (a) Root-level --bs-* overrides cascade automatically into alerts,
       the text- and bg- utilities, links, focus rings, cards and modals.
       NB: never write a bare star-slash sequence inside this comment -
       "text-* / bg-*" once closed the comment early and the parser then
       swallowed the whole :root bridge below as one invalid selector,
       silently killing every root-level --bs-* redirect (found 2026-07-11).
   (b) Bootstrap compiles many component vars as literals, so those are
       redirected per component class below. Templates keep their stock
       Bootstrap classes; the brand arrives through the variables.
   ========================================================================== */
:root {
    --bs-body-bg: var(--ks-surface);
    --bs-body-color: var(--ks-ink);
    --bs-body-font-family: var(--ks-font-body);
    /* --bs-heading-color stays on Bootstrap's default (inherit): headings
       pick up charcoal from the body, and headings inside text-white
       modal/card headers stay white. A charcoal redirect here painted the
       POS Payment/PIN/Till modal titles near-invisible on their dark
       headers (adversarial review, 2026-07-12). */
    --bs-secondary-color: var(--ks-ink-muted);
    --bs-border-color: var(--ks-rule);
    --bs-border-radius: var(--ks-radius-sm);
    --bs-border-radius-lg: var(--ks-radius);
    --bs-border-radius-xl: var(--ks-radius-lg);
    --bs-link-color: var(--ks-forest-light);
    --bs-link-color-rgb: 45, 90, 78;
    --bs-link-hover-color: var(--ks-forest);
    --bs-link-hover-color-rgb: 26, 60, 52;
    --bs-primary: var(--ks-accent);
    --bs-primary-rgb: var(--gs-primary-rgb, 26, 60, 52);
    --bs-primary-bg-subtle: var(--ks-accent-tint);
    --bs-primary-border-subtle: var(--ks-sage-mist);
    --bs-primary-text-emphasis: var(--ks-forest);
    /* --bs-success stays on Bootstrap's #198754: it must work as ink
       (.text-success, AA 4.5:1) AND as a white-text ground (.bg-success);
       --ks-green #10b981 fails both (~2.5:1). Our green washes/icons keep
       using --ks-green directly. */
    --bs-danger: var(--ks-red);
    --bs-danger-rgb: 176, 42, 55;
    --bs-warning-text-emphasis: var(--ks-amber);
    --bs-focus-ring-color: rgba(74, 124, 111, 0.35);
    --bs-box-shadow: var(--ks-shadow-md);
    --bs-box-shadow-sm: var(--ks-shadow-sm);
}

.btn-primary {
    --bs-btn-bg: var(--ks-accent);
    --bs-btn-border-color: var(--ks-accent);
    --bs-btn-color: var(--ks-on-accent);
    --bs-btn-hover-bg: var(--ks-accent-hover);
    --bs-btn-hover-border-color: var(--ks-accent-hover);
    --bs-btn-hover-color: var(--ks-on-accent);
    --bs-btn-active-bg: var(--ks-accent-active);
    --bs-btn-active-border-color: var(--ks-accent-active);
    --bs-btn-active-color: var(--ks-on-accent);
    --bs-btn-disabled-bg: var(--ks-accent);
    --bs-btn-disabled-border-color: var(--ks-accent);
    --bs-btn-focus-shadow-rgb: 74, 124, 111;
}

.btn-outline-primary {
    --bs-btn-color: var(--ks-accent);
    --bs-btn-border-color: var(--ks-accent);
    --bs-btn-hover-bg: var(--ks-accent);
    --bs-btn-hover-border-color: var(--ks-accent);
    --bs-btn-hover-color: var(--ks-on-accent);
    --bs-btn-active-bg: var(--ks-accent-active);
    --bs-btn-active-border-color: var(--ks-accent-active);
    --bs-btn-active-color: var(--ks-on-accent);
    --bs-btn-focus-shadow-rgb: 74, 124, 111;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--ks-sage-light);
    box-shadow: 0 0 0 0.25rem var(--bs-focus-ring-color);
}

.form-check-input:checked {
    background-color: var(--ks-accent);
    border-color: var(--ks-accent);
}

/* Bootstrap wires these component grounds to --bs-body-bg (now cream), but
   they all sit on paper cards - repoint them so tables, inputs, dropdowns
   and list-groups don't render a cream block inside a paper surface. */
.table {
    --bs-table-bg: transparent;
}

.form-control,
.form-select,
.form-control:focus {
    background-color: var(--ks-surface-raised);
}

.nav-pills {
    --bs-nav-pills-link-active-bg: var(--ks-accent);
}

.nav-tabs {
    --bs-nav-tabs-link-active-color: var(--ks-forest);
}

.nav-link {
    --bs-nav-link-color: var(--ks-forest-light);
    --bs-nav-link-hover-color: var(--ks-forest);
}

.dropdown-menu {
    --bs-dropdown-bg: var(--ks-surface-raised);
    --bs-dropdown-link-active-bg: var(--ks-accent);
}

.list-group {
    --bs-list-group-bg: var(--ks-surface-raised);
    --bs-list-group-active-bg: var(--ks-accent);
    --bs-list-group-active-border-color: var(--ks-accent);
}

.pagination {
    --bs-pagination-bg: var(--ks-surface-raised);
    --bs-pagination-active-bg: var(--ks-accent);
    --bs-pagination-active-border-color: var(--ks-accent);
    --bs-pagination-color: var(--ks-forest-light);
    --bs-pagination-hover-color: var(--ks-forest);
}

.progress {
    --bs-progress-bar-bg: var(--ks-accent);
}

.card {
    --bs-card-bg: var(--ks-surface-raised);
    --bs-card-border-color: transparent;
    --bs-card-border-radius: var(--ks-radius);
    --bs-card-inner-border-radius: calc(var(--ks-radius) - 1px);
    --bs-card-cap-bg: transparent;
    box-shadow: var(--ks-shadow-sm);
}

.modal-content {
    --bs-modal-bg: var(--ks-surface-raised);
    border-radius: var(--ks-radius-lg);
}

.table {
    --bs-table-border-color: var(--ks-rule);
}