/* n360-tokens.css v1.1 - 3rd Sep 2026 - r2: per-preset --n360-dark (the values ExportBranding already uses)  VERIFY-A11YB1-03SEP2026-R2-P4XNM */
/* (was v1.0 - WCAG 2.2 batch 1: the single token sheet  VERIFY-A11YB1-03SEP2026-K7WQD) */
/* ============================================================================
   N360 DESIGN TOKENS - THE ONLY PLACE A --n360-* OR --bs-* TOKEN IS DECLARED
   ============================================================================

   LOAD ORDER, every page, no exceptions:
       1. bootstrap.min.css
       2. n360-tokens.css          <- this file, immediately after Bootstrap
       3. everything else (page sheet, n360-a11y-toolbar, n360-themes, ...)

   It sits AFTER Bootstrap on purpose. Bootstrap declares --bs-body-font-family,
   --bs-body-bg, --bs-border-color, --bs-primary etc on its own :root and
   [data-bs-theme=dark] blocks at the same specificity as ours, so whichever
   sheet loads LAST wins. If this sheet were loaded before Bootstrap every
   --bs-* bridge below would be silently overridden and the platform would fall
   back to the system font stack and Bootstrap blue. The --n360-* tokens do not
   care about order (nothing else declares them), the --bs-* ones do.

   WHAT LIVES HERE
     - The base palette, light and dark
     - The four client presets (blue / meridian / crisis, default is the base),
       light and dark - moved here from n360-themes.css, which keeps the
       typography, geometry and component reskins but no longer declares a
       single variable
     - The Bootstrap bridge (--bs-primary, links, focus ring, --bs-info) so
       stock Bootstrap components follow the brand and the preset
     - Component families that ride along because their old home was one of
       the deleted page :root blocks (--audit-*, --pattern-color, --star-gold,
       --claude-shadow)

   WHAT DOES NOT LIVE HERE
     - n360-rating.css declares its own --n360-rate-* family, scoped to the
       rating component. Correct and deliberate - leave it there.
     - n360-discovery.css declares --ond-* on the discovery panel. Same.
     - Per-page SURFACE choices (a page painting its body a different colour)
       belong in that page's sheet, scoped to body - see n360-login.css.

   THE RULES THE PLATFORM IS BUILT ON (also in the README token contract)
     1. Never redeclare a --n360-* token in a page sheet. Add it here.
     2. --n360-primary is a TEXT and ICON colour. It flips to cyan in dark
        mode (that is correct - cyan on a dark page reads well). White text on
        it therefore FAILS in dark mode. Any FILL that carries white text uses
        --n360-primary-fill, which is safe under white in both modes and in
        every preset.
     3. Anything sitting on the accent (--n360-cyan) uses --n360-on-cyan for
        its text or icon. Never a literal navy, never a literal white: the
        accent is cyan by default (needs dark ink), red under crisis and blue
        under the blue preset (need white), amber under meridian (needs pine).
     4. --n360-danger is a TEXT colour too. A fill that carries white text on
        a danger colour uses --n360-danger-fill.
     5. Muted text uses --n360-muted, never a literal slate grey. The old
        #94a3b8 / #64748b greys were 2.3:1 and 4.2:1 on the light surfaces.

   The audit-scripts folder shipped with the batch (audit_contrast.py) is the
   acceptance test: it resolves every colour/background pair in every sheet
   against this file, per preset, per mode. Re-run it after any change here.
   ============================================================================ */


/* ── BASE PALETTE, LIGHT ─────────────────────────────────────────────────── */
:root, [data-bs-theme="light"] {
    /* Brand */
    --n360-primary: #005a84;         /* TEXT / ICON colour. Flips to cyan in dark - see rule 2 */
    --n360-primary-fill: #005a84;    /* FILL under white text. 7.5:1 light, 8.9:1 dark */
    --n360-on-primary: #ffffff;      /* text on --n360-primary-fill */
    --n360-cyan: #00bde7;            /* the accent. Cyan by default; red / blue / amber under presets */
    --n360-on-cyan: #003450;         /* text and icons ON the accent. Navy on cyan = 5.87:1 */
    --n360-dark: #003450;            /* house navy. Presets override it with their own deep chrome colour (below) - the same values
                                        ExportBranding.Dark already gives the login and the exports. Constant across modes */
    --n360-sidebar: #003450;
    --n360-bg: #f6f6f6;              /* page background. Provider used #f8fafc - reconciled to this */
    --n360-text: #333333;            /* body ink where a page opts out of Bootstrap's #212529 (login) */
    --n360-ink: #1f2933;             /* strong ink on cards (n360-discovery already asked for this) */
    --n360-muted: #5b6b7d;           /* muted text. 5.5:1 on white, 4.9:1 on #eef2f5, 4.7:1 on #eceff1 */

    /* Status - as TEXT on the page or a card */
    --n360-danger: #dc3545;          /* Bootstrap's danger. 4.5:1 on white */
    --n360-danger-fill: #b42334;     /* FILL under white text. 6.5:1 (same red as --audit-danger) */
    --n360-warning: #ffc107;
    --n360-success: #198754;         /* Bootstrap's green. Network Intelligence had #2ecc71 - that is the dark value now */
    --star-gold: #ffc107;            /* ranking stars, preferred badge. Navy on it = 8:1 */

    /* Session Audit status inks (were session-audit.css :root) */
    --audit-success: #167756;
    --audit-warning: #8a6200;
    --audit-danger: #b42334;

    /* Surfaces and chrome */
    --n360-card-bg: #ffffff;
    --n360-card-border: #f6f6f6;
    --n360-card-hover-bg: #005a84;   /* the results card hover / map-sync paint. Kept as its OWN literal, not an
                                        alias of --n360-primary-fill: presets do not restyle it today and results.css
                                        paints it with !important, so aliasing would change the hovered card under
                                        every preset. Leave for the consolidation pass */
    --pattern-color: rgba(0, 0, 0, 0.03);
    --claude-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);

    /* Synonyms that n360-global.css (login + access denied) was written against.
       They are ALIASES now - the same colour under a second name - so the two
       sheets can never disagree again. Do not use them in new code. */
    --n360-accent: var(--n360-cyan);
    --n360-depth: var(--n360-dark);          /* was #005c88 in global light - 4.46:1 on gold, now navy at 8:1 */
    --n360-bg-light: var(--n360-bg);

    /* ── Bootstrap bridge ──
       Bootstrap's components read THEIR variables, not ours, so these are what
       carry .text-primary, .btn-primary, links, focus rings and the info family
       onto the brand. --bs-primary and --bs-primary-rgb are declared as a pair
       of literals in every block where --n360-primary changes (an rgb triple
       cannot be derived from a hex var). Were n360-forms.css lines 1-30. */
    --bs-body-font-family: 'Plus Jakarta Sans', sans-serif;
    --bs-primary: #005a84;
    --bs-primary-rgb: 0, 90, 132;
    --bs-link-color: #005a84;
    --bs-link-color-rgb: 0, 90, 132;
    --bs-link-hover-color: #00bde7;
    --bs-link-hover-color-rgb: 0, 189, 231;
    --n360-accent-rgb: 0, 189, 231;
    --bs-info: rgb(var(--n360-accent-rgb));
    --bs-info-rgb: var(--n360-accent-rgb);
    --bs-focus-ring-color: rgba(var(--bs-primary-rgb), 0.25);
}

/* ── BASE PALETTE, DARK ──────────────────────────────────────────────────── */
[data-bs-theme="dark"] {
    --n360-primary: #00bde7;         /* the flip. Cyan TEXT on a dark page = 8.5:1 */
    --n360-primary-fill: #004f70;    /* the results card-hover precedent. White on it = 8.9:1 */
    --n360-bg: #0b1114;
    --n360-sidebar: #001a29;
    --n360-text: #f8f9fa;
    --n360-ink: #e6edf3;
    --n360-muted: #9aa7b2;           /* 6.3:1 on #212529, 7.7:1 on #0b1114 */

    --n360-danger: #ff4757;          /* was Network Intelligence's light value; it is a dark-page red. 5.7:1 on #0b1114 */
    --n360-danger-fill: #b42334;     /* still 6.5:1 under white; 2.9:1 against the dark page */
    --n360-warning: #f1c40f;
    --n360-success: #2ecc71;         /* Network Intelligence keeps its greens - it is dark by default */

    --audit-success: #69d7a7;
    --audit-warning: #ffd166;
    --audit-danger: #ff8b98;

    --n360-card-bg: #212529;
    --n360-card-border: #2a3b47;     /* global had var(--n360-primary) here - a cyan card border in dark. Dead rule, reconciled */
    --n360-card-hover-bg: #004f70;
    --pattern-color: rgba(255, 255, 255, 0.05);
    --claude-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
    --bs-border-color: #2a3b47;      /* login used #333333, everyone else this. Reconciled */

    --bs-primary: #00bde7;
    --bs-primary-rgb: 0, 189, 231;
    --bs-link-color: #00bde7;
    --bs-link-color-rgb: 0, 189, 231;
    --bs-link-hover-color: #6fe0ff;
    --bs-link-hover-color-rgb: 111, 224, 255;
    --n360-accent-rgb: 0, 189, 231;
}


/* ============================================================================
   CLIENT PRESETS - <html data-n360-theme="blue|meridian|crisis">
   Set server-side by _Sidebar.cshtml from Preferences > Platform Theme; the
   default preset writes NO attribute, so the base palette above is the
   default. Each preset has a light block and a dark twin. ORDER MATTERS and
   reproduces the cascade the platform has always had (page :root, then the
   themes sheet): a preset's light block comes AFTER the base dark block, so
   in dark mode a token the preset sets but its dark twin does not (sidebar,
   accent, danger) keeps the preset's value rather than the base dark one.

   Per preset, three tokens are NEW in this batch:
     --n360-on-cyan       text on that preset's accent (measured, not guessed)
     --n360-primary-fill  a fill safe under white in that preset's dark mode
     --n360-danger-fill   a fill safe under white for alert headers
   ============================================================================ */

/* ── SHADES OF BLUE (Collinson IAP portal) ──────────────────────────────── */
[data-n360-theme="blue"] {
    --n360-primary: #0f3765;
    --n360-primary-fill: #0f3765;    /* white on it 12:1 */
    --n360-cyan: #067cba;
    --n360-on-cyan: #ffffff;         /* white on #067cba = 4.57:1; navy would be 2.86:1 */
    --n360-dark: #0f3765;            /* v1.1: the preset's deep navy (ExportBranding.Dark). The CMS fork used #0b2038 - reconciled */
    --n360-sidebar: #0f3765;
    --n360-danger: #772730;
    --n360-danger-fill: #772730;     /* white on it 9.9:1 */
    --n360-highlight: #772730;       /* result-list link colour (preset-only token, no base value) */
    --n360-tint: #c7dfef;            /* row striping / pill tint (preset-only token, no base value) */

    --bs-primary: #0f3765;
    --bs-primary-rgb: 15, 55, 101;
    --bs-link-color: #0f3765;
    --bs-link-color-rgb: 15, 55, 101;
    --bs-link-hover-color: #067cba;
    --bs-link-hover-color-rgb: 6, 124, 186;
    --n360-accent-rgb: 6, 124, 186;
}
[data-bs-theme="dark"][data-n360-theme="blue"] {
    --n360-primary: #4da3d8;
    --n360-primary-fill: #1a5a99;    /* lifted navy: white on it 7.1:1, and it still shows against the dark page (2.7:1) */
    --n360-danger: #e37f89;          /* the maroon lifted for a dark page: 6.9:1. #772730 was 1.9:1 */
    --n360-accent-rgb: 77, 163, 216;
    --bs-link-color: #4da3d8;
    --bs-link-color-rgb: 77, 163, 216;
    --bs-link-hover-color: #7cc0e8;
    --bs-link-hover-color-rgb: 124, 192, 232;
    --bs-primary: #4da3d8;
    --bs-primary-rgb: 77, 163, 216;
}

/* ── MERIDIAN (pine + amber + cream) ────────────────────────────────────── */
[data-n360-theme="meridian"] {
    --n360-primary: #0E3B2E;
    --n360-primary-fill: #0E3B2E;    /* white on it 12.5:1 */
    --n360-cyan: #F5A623;
    --n360-on-cyan: #0E3B2E;         /* pine on amber = 6.15:1 (white would be 2.0:1) */
    --n360-dark: #0E3B2E;            /* v1.1: ExportBranding.Dark. The CMS fork used #0A2C22 - reconciled */
    --n360-sidebar: #0E3B2E;
    --n360-danger: #B8431E;          /* was #E4572E - 3.7:1 as text on white. This is the same orange-red at 5.4:1 */
    --n360-danger-fill: #B8431E;     /* white on it 5.4:1 */
    --n360-highlight: #0E3B2E;
    --n360-tint: #F7F1E3;
    --star-gold: #F5A623;            /* meridian's stars are its amber (was in n360-themes.css v1.2) */

    --bs-primary: #0E3B2E;
    --bs-primary-rgb: 14, 59, 46;
    --bs-link-color: #0E3B2E;
    --bs-link-color-rgb: 14, 59, 46;
    --bs-link-hover-color: #DE8F0D;
    --bs-link-hover-color-rgb: 222, 143, 13;
    --n360-accent-rgb: 245, 166, 35;
}
[data-bs-theme="dark"][data-n360-theme="meridian"] {
    --n360-primary: #F5C976;
    --n360-primary-fill: #1f6b52;    /* pine lifted for a dark page: white on it 6.4:1, 3:1 against the page */
    --n360-danger: #ff8a65;          /* 8.2:1 on #0b1114. #E4572E was 4.2:1 */
    --bs-link-color: #F5C976;
    --bs-link-color-rgb: 245, 201, 118;
    --bs-link-hover-color: #F5A623;
    --bs-link-hover-color-rgb: 245, 166, 35;
    --bs-primary: #F5C976;
    --bs-primary-rgb: 245, 201, 118;
}

/* ── CRISIS24 BLACK & RED (the preset KP runs) ──────────────────────────── */
[data-n360-theme="crisis"] {
    --n360-primary: #1B1B1B;
    --n360-primary-fill: #1B1B1B;    /* white on it 17:1 - the near-black chip the crisis dashboard already shows */
    --n360-cyan: #E12B22;
    --n360-on-cyan: #ffffff;         /* white on #E12B22 = 4.6:1; navy would be 2.84:1 (F3 in the audit) */
    --n360-dark: #111111;            /* v1.1: ExportBranding.Dark and the CMS fork agree on this one */
    --n360-sidebar: #111111;
    --n360-danger: #B00020;
    --n360-danger-fill: #B00020;     /* white on it 7.3:1 */
    --n360-highlight: #E12B22;
    --n360-tint: #EFE9DC;

    --bs-primary: #E12B22;
    --bs-primary-rgb: 225, 43, 34;
    --bs-link-color: #E12B22;
    --bs-link-color-rgb: 225, 43, 34;
    --bs-link-hover-color: #B81C15;
    --bs-link-hover-color-rgb: 184, 28, 21;
    --n360-accent-rgb: 225, 43, 34;
}
/* The cream SURFACE token - light mode only, dark keeps dark surfaces. Pages
   opt in with background: var(--n360-surface, <fallback>), which is why the
   base palette must NOT declare it: an undefined token is what makes the
   fallback fire on the default preset. */
[data-n360-theme="crisis"]:not([data-bs-theme="dark"]) { --n360-surface: #EFE9DC; }
[data-bs-theme="dark"][data-n360-theme="crisis"] {
    --n360-primary: #FF5A4F;
    --n360-primary-fill: #B81C15;    /* the theme's own deep red (its link-hover): white on it 6.5:1, 2.9:1 against the page.
                                        #1B1B1B would vanish on #0b1114 and #FF5A4F is 3.1:1 under white (F2) */
    --n360-danger: #ff6b61;          /* 6.8:1 on #0b1114. #B00020 was 2.1:1 on the dark page */
    --n360-accent-rgb: 255, 90, 79;
    --bs-link-color: #FF5A4F;
    --bs-link-color-rgb: 255, 90, 79;
    --bs-link-hover-color: #FF8A82;
    --bs-link-hover-color-rgb: 255, 138, 130;
    --bs-primary: #FF5A4F;
    --bs-primary-rgb: 255, 90, 79;
}

/* Existing logo utility shared by login, preferences and navigation. */
.n360-logo-light {
    filter: brightness(0) invert(1);
}