/* ════════════════════════════════════════════════════════════════════════
   WBL — wbl-tokens.css : THE ONE HOME OF THE DESIGN TOKENS (R-0041, R-0042).
   File version 1.0.0 (2026-07-27) — Claude.

   ⛔ WHY THIS FILE WAS SPLIT OUT OF wbl-base.css.
   `templates/accounts/base_auth.html` styles the login screen's branding panel
   with `background: linear-gradient(145deg, var(--fluent-primary) 0%,
   var(--fluent-primary-hover) 100%)` and `color: white` — but it loads ONLY
   `vendor/fabric.min.css`, which defines ZERO `--fluent-*` tokens, and it
   declares no `:root` of its own. The tokens lived exclusively in
   `wbl-base.css`, which NO auth template loads.

   Per CSS spec an undefined `var()` makes the declaration INVALID AT
   COMPUTED-VALUE TIME, so `background` fell back to `transparent` and the body's
   near-white gradient (#f0fffe → #e8f8f7 → #f0f8ff) showed through — under
   `color: white`. Measured contrast: ~1.04:1 where WCAG AA needs 4.5:1.
   `.brand-logo` did the same in reverse (white bg, `color: var(--fluent-primary)`
   → inherited white → white-on-white).

   Hitesh, 2026-07-27: "i cant see many of the things on the login screen itself
   since background and foreground are not contrasted."

   ⭐ THIS IS `R-0043` (phantom vocabulary) ONE LEVEL DOWN: the rule already says
   a CLASS used in HTML must be defined in CSS. A TOKEN is vocabulary too, and
   nothing was checking it. The enforcer is `platform_standards/css_tokens.py`.

   ⛔ DO NOT re-declare these anywhere else. One home; every page that needs them
   LINKS THIS FILE (base.html · purchase/_base.html · accounts/base_auth.html).
   ════════════════════════════════════════════════════════════════════════ */

        :root {
            /* [v2.853] Palette retoned teal→blue to match the "Windlas Unity Engine" mockups (Hitesh 2026-07-23). ONE switch — change --fluent-primary and brand/buttons/active/focus/tints all follow (the tints derive from it via color-mix). */
            --fluent-primary: #0f6cbd;
            --fluent-primary-hover: #115ea3;
            --fluent-primary-tint: color-mix(in srgb, var(--fluent-primary) 8%, #fff);
            --fluent-primary-tint-strong: color-mix(in srgb, var(--fluent-primary) 14%, #fff);
            --fluent-success: #107C10;
            --fluent-warning: #F7630C;
            --fluent-danger: #D13438;
            --fluent-info: #8764B8;
            
            --fluent-neutral-10: #FAF9F8;
            --fluent-neutral-20: #F3F2F1;
            --fluent-neutral-30: #EDEBE9;
            --fluent-neutral-40: #E1DFDD;
            --fluent-neutral-50: #D2D0CE;
            --fluent-neutral-60: #C8C6C4;
            --fluent-neutral-70: #A19F9D;
            --fluent-neutral-80: #605E5C;
            --fluent-neutral-90: #3B3A39;
            --fluent-neutral-100: #323130;
            --fluent-neutral-110: #201F1E;
            
            --fluent-shadow-2: 0 0.3px 0.9px rgba(0, 0, 0, 0.1), 0 1.6px 3.6px rgba(0, 0, 0, 0.13);
            --fluent-shadow-4: 0 1.6px 3.6px rgba(0, 0, 0, 0.132), 0 0.3px 0.9px rgba(0, 0, 0, 0.108);
            --fluent-shadow-8: 0 3.2px 7.2px rgba(0, 0, 0, 0.132), 0 0.6px 1.8px rgba(0, 0, 0, 0.108);
            --fluent-shadow-16: 0 6.4px 14.4px rgba(0, 0, 0, 0.132), 0 1.2px 3.6px rgba(0, 0, 0, 0.108);
            
            --sidebar-width: 280px;
        }