/*
 * Keyple brand design tokens — single source of truth for the KMS customer UI.
 *
 * Derived from "Keyple — Brand & Visual Design Guidance" (Fusion Collective,
 * 2026-06-08), Option A — the recommended direction. Option A activates the
 * four colours that already live inside the Keyple keyhole logo and deepens
 * them just enough to function as UI while clearing WCAG AA contrast on white.
 *
 * Loaded AFTER Bootstrap's CSS in the base templates. CSS custom properties
 * cascade by source order at equal specificity, so Bootstrap 5.3 declares its
 * own `:root` defaults (`--bs-primary`, `--bs-primary-rgb`, …) and this later
 * stylesheet wins — loading this file *before* Bootstrap would let Bootstrap's
 * `:root` re-clobber every brand variable and produce no visible change.
 *
 * TWO TOKEN VOCABULARIES live here, both fed by Option A:
 *   --kp-*    : the granular palette + typography scale (KMS-892/897), consumed
 *               by base-components.css and the login/sidebar shells.
 *   --brand-* : the functional palette (KMS-891/895/898), consumed by the app
 *               templates' inline styles and the broad hard-coded-colour sweep.
 * They were introduced on two parallel branches and unified here (KMS-910) so
 * every consumer resolves regardless of which name it uses. The hex values
 * agree (Option A azure-led); both names are intentionally kept so neither
 * side's landed work needs rewriting.
 *
 * Contrast ratios are against white (#FFFFFF), WCAG 2.1 relative-luminance.
 */

:root {
    /* ====================================================================
       --kp-* palette + type scale (KMS-892 / KMS-897)
       ==================================================================== */
    --kp-primary:      #0A6FB0;   /* Azure 700 — buttons, links, active states */
    --kp-primary-dark: #085a8e;   /* hover/pressed */
    --kp-ink:          #102A43;   /* nav, headings, dark text */
    --kp-emerald:      #1a8a5a;   /* success, positive indicators */
    --kp-coral:        #d95f43;   /* alerts, CTA fills — not text */
    --kp-gold:         #c8940a;   /* highlight fills — not text */
    --kp-surface:      #f4f8fb;   /* page background */

    /*
     * Typography — single type family + a fixed modular scale (KMS-897).
     * Roboto is already loaded (Google Fonts, weights 300/400/500/700) in the
     * base shells; `--kp-font-sans` is the one family the app declares, with a
     * system-font fallback for the brief window before the webfont paints.
     * Consumed by base-components.css (`body` + `h1`–`h4`). Sizes are rem so they
     * honor the user's root font-size; the px notes are at the 16px default.
     */
    --kp-font-sans: 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif;
    --kp-text-sm:   0.875rem;   /* 14px — captions, meta */
    --kp-text-base: 1rem;       /* 16px — body */
    --kp-text-lg:   1.125rem;   /* 18px — lead/intro */
    --kp-text-xl:   1.25rem;    /* 20px — h4 */
    --kp-text-2xl:  1.5rem;     /* 24px — h3 */
    --kp-text-3xl:  1.875rem;   /* 30px — h2 */
    --kp-text-4xl:  2.25rem;    /* 36px — h1 */

    /* ====================================================================
       --brand-* functional palette (KMS-891 / KMS-895 / KMS-898)
       ==================================================================== */
    /* ---- Functional palette (Option A — deepened for on-screen use) ---- */
    /* Azure 700 — primary for buttons and links. 5.37:1 (AA body text). */
    --brand-primary: #0A6FB0;
    --brand-primary-rgb: 10, 111, 176;
    /* Darker azure for hover / active / pressed states. */
    --brand-primary-hover: #085B90;
    --brand-primary-hover-rgb: 8, 91, 144;

    /* Ink — text and navigation. 14.6:1 (AAA). */
    --brand-ink: #102A43;
    --brand-ink-rgb: 16, 42, 67;

    /* Emerald — success accent. 3.27:1 (AA large / UI only, not body text). */
    --brand-success: #1AA179;
    --brand-success-rgb: 26, 161, 121;
    /* Deepened emerald for hover / active / pressed states (mirrors the
       primary's hover derivation — ~0.81 of the base channels). */
    --brand-success-hover: #158262;
    --brand-success-hover-rgb: 21, 130, 98;

    /* Coral — CTA / alert accent. 3.69:1 (AA large / UI only, not body text). */
    --brand-cta: #E05A39;
    --brand-cta-rgb: 224, 90, 57;

    /* Gold — highlight. 1.82:1 (fills only — never text). */
    --brand-highlight: #F2B705;
    --brand-highlight-rgb: 242, 183, 5;

    /* ---- Logo full-strength colours (graphics / fills only) ---- */
    --brand-logo-azure: #009CEA;
    --brand-logo-coral: #F07854;
    --brand-logo-emerald: #30CC96;
    --brand-logo-gold: #FCCC00;

    /* ---- Surfaces ---- */
    /* Pale azure tint — login / marketing backgrounds re-based on the
       primary's tint (replaces the old framework pale-cyan gradient). */
    --brand-surface-tint: #EAF3FA;

    /* ---- Typography ---- */
    /* One UI family across the app (the doc keeps Roboto as the UI face). */
    --brand-font-sans: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI",
        "Helvetica Neue", Arial, sans-serif;

    /* ====================================================================
       Re-point Bootstrap's own tokens at the brand (shared by both palettes —
       the values agree, so a single set drives every framework component).
       ==================================================================== */
    --bs-primary: var(--brand-primary);
    --bs-primary-rgb: var(--brand-primary-rgb);
    --bs-link-color: var(--brand-primary);
    --bs-link-color-rgb: var(--brand-primary-rgb);
    --bs-link-hover-color: var(--brand-primary-hover);
    --bs-link-hover-color-rgb: var(--brand-primary-hover-rgb);
    /* Bootstrap 5.3 drives focus rings from a dedicated token — point it at the
       brand primary so rings match links/buttons. */
    --bs-focus-ring-color: rgba(var(--brand-primary-rgb), .25);
}

/* Lead the app with the brand UI family. */
body {
    font-family: var(--brand-font-sans);
}

/* Recruiting UIs are table-heavy; aligned (tabular) numerals read cleaner. */
.table {
    font-variant-numeric: tabular-nums;
}

/* ---- Bootstrap components that compile literal hex (not var-driven) ----
   Re-point their local component variables / properties at the brand. */

.btn-primary {
    --bs-btn-bg: var(--brand-primary);
    --bs-btn-border-color: var(--brand-primary);
    --bs-btn-hover-bg: var(--brand-primary-hover);
    --bs-btn-hover-border-color: var(--brand-primary-hover);
    --bs-btn-active-bg: var(--brand-primary-hover);
    --bs-btn-active-border-color: var(--brand-primary-hover);
    --bs-btn-disabled-bg: var(--brand-primary);
    --bs-btn-disabled-border-color: var(--brand-primary);
    --bs-btn-focus-shadow-rgb: var(--brand-primary-rgb);
}

.btn-outline-primary {
    --bs-btn-color: var(--brand-primary);
    --bs-btn-border-color: var(--brand-primary);
    --bs-btn-hover-bg: var(--brand-primary);
    --bs-btn-hover-border-color: var(--brand-primary);
    --bs-btn-active-bg: var(--brand-primary);
    --bs-btn-active-border-color: var(--brand-primary);
    --bs-btn-disabled-color: var(--brand-primary);
    --bs-btn-disabled-border-color: var(--brand-primary);
    --bs-btn-focus-shadow-rgb: var(--brand-primary-rgb);
}

/* Form focus rings and checked controls — these are compiled to Bootstrap's
   default blue, so point them at the brand primary explicitly. */
.form-control:focus,
.form-select:focus {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 0.25rem rgba(var(--brand-primary-rgb), 0.25);
}

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

.form-check-input:focus {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 0.25rem rgba(var(--brand-primary-rgb), 0.25);
}