/* ============================================================================
   WhirlWind design tokens — the ONE central token layer for WhirlWindView.
   Source of every value: UI-Master-Design-Reference.pdf (AssetBank clients/whirlwind/portal-pallette),
   pages Colors / Typography / Shadows / Spacing — read from the PDF text layer, not sampled.
   Loaded FIRST (App.razor) so every product/page stylesheet can consume it.

   RULES
   · Names are Bootstrap 5.3's (--bs-*) so a controlled Bootstrap build could be introduced later
     without renaming; WhirlWind extensions carry --ww-*.
   · This file declares VARIABLES and @font-face only — no element selector, no class, so it changes
     nothing on any page that does not opt in (the board, /cards, /preview, the WWI demo are untouched).
   · Light is the default column; dark is [data-bs-theme="dark"] (set on <html> by ww-theme.js) with a
     prefers-color-scheme fallback for the no-JS case. Base black/white and the brand hues never change
     with mode (PDF: "Base colors ... should not change between light and dark modes").
   · PRIMARY #1DCDFE CARRIES DARK TEXT: white on it is 1.87:1 (fails AA); Text/Default on it is 8.24:1.
   · The four extended "-Light" tints are BACKGROUNDS for Text/Default; the hue itself is not a text colour
     on its tint (Completion on Completion-Light is 1.81:1). Hue = border, dot, icon.
   ========================================================================= */

/* ---- self-hosted fonts (see fonts/PROVENANCE.md) ------------------------ */
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 300; font-display: swap; src: url("../fonts/montserrat-latin-300-normal.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/montserrat-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/montserrat-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/montserrat-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Roboto Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/roboto-mono-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Roboto Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/roboto-mono-latin-500-normal.woff2") format("woff2"); }

:root,
[data-bs-theme="light"] {
  color-scheme: light;

  /* ---- brand (mode-independent) ---------------------------------------- */
  --ww-brand-blue: #1DCDFE;      /* Brand Colors/Brand/Primary/Blue  */
  --ww-brand-navy: #2F455C;      /* Brand Colors/Brand/Primary/Navy  */
  --ww-brand-logo: #ED3826;      /* Brand Colors/Brand/Primary/Logo  */
  --ww-black: #000000;           /* Base Colors/Black */
  --ww-white: #FFFFFF;           /* Base Colors/White */
  --ww-on-primary: #212529;      /* text on Primary / Warning / Attention / Completion — dark in BOTH modes (contrast rule) */

  /* ---- theme colours (Bootstrap names) --------------------------------- */
  --bs-primary:   #1DCDFE;  --bs-primary-rgb:   29,205,254;
  --bs-secondary: #6C757D;  --bs-secondary-rgb: 108,117,125;
  --bs-success:   #198754;  --bs-success-rgb:   25,135,84;
  --bs-warning:   #FFC107;  --bs-warning-rgb:   255,193,7;
  --bs-danger:    #DC3545;  --bs-danger-rgb:    220,53,69;
  --bs-info:      #0D6EFD;  --bs-info-rgb:      13,110,253;
  --bs-light:     #F8F9FA;  --bs-light-rgb:     248,249,250;
  --bs-dark:      #212529;  --bs-dark-rgb:      33,37,41;

  /* ---- WhirlWind extended semantics + their Light tints ---------------- */
  --ww-urgent:           #D63364;  --ww-urgent-rgb: 214,51,100;
  --ww-urgent-light:     #F7D6E0;
  --ww-attention:        #FD7E14;  --ww-attention-rgb: 253,126,20;
  --ww-attention-light:  #FFE5D0;
  --ww-completion:       #20C997;  --ww-completion-rgb: 32,201,151;
  --ww-completion-light: #D2F4EA;
  --ww-misc:             #8540F5;  --ww-misc-rgb: 133,64,245;
  --ww-misc-light:       #E0CFFC;  /* PDF lists this row as "Misc" a second time; by analogy it is Misc-Light (flagged, D9) */

  /* ---- text hierarchy ---------------------------------------------------- */
  --bs-body-color:           #212529;                      /* Text/Default   */
  --bs-body-color-rgb:       33,37,41;
  --bs-secondary-color:      rgba(33, 37, 41, 0.75);       /* Text/Secondary */
  --bs-secondary-color-rgb:  33,37,41;
  --bs-tertiary-color:       rgba(33, 37, 41, 0.5);        /* Text/Tertiary  */
  --bs-tertiary-color-rgb:   33,37,41;
  --bs-emphasis-color:       #000000;
  --bs-link-color:           #007BA7;                      /* Text/Link      */
  --bs-link-color-rgb:       0,123,167;
  --bs-link-hover-color:     #006B8F;                      /* Text/Link Hover */
  --bs-link-hover-color-rgb: 0,107,143;
  --bs-primary-text-emphasis:   #033B55;
  --bs-secondary-text-emphasis: #2B2F32;
  --bs-success-text-emphasis:   #0A3622;
  --bs-warning-text-emphasis:   #664D03;
  --bs-danger-text-emphasis:    #58151C;
  --bs-info-text-emphasis:      #052960;
  --bs-light-text-emphasis:     #495057;
  --bs-dark-text-emphasis:      #343A40;

  /* ---- backgrounds ------------------------------------------------------- */
  --bs-body-bg:            #FFFFFF;   /* Background/Default   */
  --bs-body-bg-rgb:        255,255,255;
  --bs-secondary-bg:       #E9ECEF;   /* Background/Secondary */
  --bs-secondary-bg-rgb:   233,236,239;
  --bs-tertiary-bg:        #F8F9FA;   /* Background/Tertiary  */
  --bs-tertiary-bg-rgb:    248,249,250;
  --bs-primary-bg-subtle:   #CFF4FC;
  --bs-secondary-bg-subtle: #E2E3E5;
  --bs-success-bg-subtle:   #D1E7DD;
  --bs-warning-bg-subtle:   #FFF3CD;
  --bs-danger-bg-subtle:    #F8D7DA;
  --bs-info-bg-subtle:      #CFE2FF;
  --bs-light-bg-subtle:     #FCFCFD;
  --bs-dark-bg-subtle:      #CED4DA;

  /* ---- borders ----------------------------------------------------------- */
  --bs-border-color:        #DEE2E6;  /* Border/Color */
  --bs-border-width:        1px;
  --bs-border-radius:       6px;
  --bs-border-radius-sm:    4px;
  --bs-border-radius-lg:    8px;
  --bs-border-radius-pill:  999px;
  --bs-primary-border-subtle:   #9EEAF9;
  --bs-secondary-border-subtle: #C4C8CB;
  --bs-success-border-subtle:   #A3CFBB;
  --bs-warning-border-subtle:   #FFE69C;
  --bs-danger-border-subtle:    #F1AEB5;
  --bs-info-border-subtle:      #9EC5FE;
  --bs-light-border-subtle:     #E9ECEF;
  --bs-dark-border-subtle:      #ADB5BD;

  /* ---- shadows (PDF: Shadows) ------------------------------------------- */
  --bs-box-shadow:     0 8px 16px rgba(0, 0, 0, 0.15);    /* Regular */
  --bs-box-shadow-sm:  0 2px 4px rgba(0, 0, 0, 0.075);    /* Small   */
  --bs-box-shadow-lg:  0 16px 48px rgba(0, 0, 0, 0.175);  /* Larger  */
  --ww-overlay:        rgba(0, 0, 0, 0.2);                 /* offcanvas / navbar overlay: #000000 @ 20% */

  /* ---- spacing (PDF: Spacing — 4px grid, 8px baseline, 24px container) -- */
  --ww-space-1: 4px;  --ww-space-2: 8px;  --ww-space-3: 12px; --ww-space-4: 16px;
  --ww-space-5: 20px; --ww-space-6: 24px; --ww-space-8: 32px; --ww-space-10: 40px;
  --ww-container-pad: 24px;          /* 16px on small screens — see media rule below */
  --ww-gap: 24px;

  /* ---- typography (PDF: Typography) ------------------------------------ */
  --bs-font-sans-serif: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --bs-font-monospace:  "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --bs-body-font-family: var(--bs-font-sans-serif);
  --bs-body-font-size:   16px;      /* 1rem at a 16px root; declared in px because app.css sets html to 15px for the board */
  --bs-body-font-weight: 400;
  --bs-body-line-height: 1.5;       /* 150% */
  --ww-font-size-small:  14px;      /* Small / Code; the floor for ordinary supporting text */
  --ww-font-size-code:   14px;
  --ww-line-height-heading: 1.2;    /* 120% */
  --ww-heading-weight:   700;       /* Montserrat Bold */
  --ww-h1: 40px;   /* desktop */
  --ww-h2: 32px;
  --ww-h3: 28px;
  --ww-h4: 24px;
  --ww-h5: 20px;
  --ww-h6: 16px;
  --ww-badge-line-height: 1;        /* badges: 100% */
  --ww-badge-font-size:   15px;     /* Badge H5 (0.75 × H5 20px) — the default so labels stay readable; Badge H6 = 12px is not used for content */
  --ww-badge-font-size-lg: 18px;    /* Badge H4 */
  --ww-icon-size: 24px;             /* PDF: Icons — default 24px */
  --ww-focus-ring: 0 0 0 4px rgba(29, 205, 254, 0.5);
  /* Readable text inside tinted alerts/callouts: light mode keeps the governed Text/Emphasis colour
     (currentcolor fallback); dark mode overrides to near-white — Leon's readability ruling (D14). */
  --ww-tint-text: initial;

  /* ---- shell (navbar / offcanvas are ALWAYS dark per PDF) --------------- */
  --ww-nav-bg:        #212529;   /* Background/Default (dark) */
  --ww-nav-bg-2:      #2B3035;   /* Background/Tertiary (dark) */
  --ww-nav-color:     #F8F9FA;   /* near-white: Leon's dark-readability ruling (D14); PDF Text/Default dark #DEE2E6 was too gray */
  --ww-nav-muted:     rgba(248, 249, 250, 0.8);
  --ww-nav-border:    #495057;   /* Border/Color (dark) */
  --ww-nav-link:      #1DCDFE;   /* Text/Link (dark) */
  --ww-nav-link-hover:#19AED8;
  --ww-nav-active-bg: #032830;   /* Background/Subtle/Primary (dark) */
  --ww-nav-active-fg: #6EDFF6;   /* Text/Emphasis/Primary (dark) */
  --ww-offcanvas-width: 400px;   /* PDF: max 400px desktop; mobile = 100% − 40px gap */
  --ww-offcanvas-gap:   40px;
}

[data-bs-theme="dark"] {
  color-scheme: dark;
  --bs-light: #495057;  --bs-light-rgb: 73,80,87;
  --bs-dark:  #F8F9FA;  --bs-dark-rgb:  248,249,250;
  --ww-urgent-light:     #2B0A17;
  --ww-attention-light:  #331904;
  --ww-completion-light: #06281E;
  --ww-misc-light:       #140330;
  /* D14 (Leon, 15 Sep): readable text in dark mode is NEAR-WHITE, not the PDF's #DEE2E6 gray.
     Body / descriptions / field values / table content / notes = #F8F9FA; de-emphasised text stays
     comfortably readable at 82%; tertiary (decorative) 60%. Status, badge, border and background
     tokens are unchanged. */
  --bs-body-color:           #F8F9FA;
  --bs-body-color-rgb:       248,249,250;
  --bs-secondary-color:      rgba(248, 249, 250, 0.82);
  --bs-secondary-color-rgb:  248,249,250;
  --bs-tertiary-color:       rgba(248, 249, 250, 0.6);
  --bs-tertiary-color-rgb:   248,249,250;
  --bs-emphasis-color:       #FFFFFF;
  --ww-tint-text:            #F8F9FA;
  --bs-link-color:           #1DCDFE;
  --bs-link-color-rgb:       29,205,254;
  --bs-link-hover-color:     #19AED8;
  --bs-link-hover-color-rgb: 25,174,216;
  --bs-primary-text-emphasis:   #6EDFF6;
  --bs-secondary-text-emphasis: #A7ACB1;
  --bs-success-text-emphasis:   #75B798;
  --bs-warning-text-emphasis:   #FFDA6A;
  --bs-danger-text-emphasis:    #EA868F;
  --bs-info-text-emphasis:      #6EA8FE;
  --bs-light-text-emphasis:     #F8F9FA;
  --bs-dark-text-emphasis:      #F8F9FA;
  --bs-body-bg:            #212529;
  --bs-body-bg-rgb:        33,37,41;
  --bs-secondary-bg:       #343A40;
  --bs-secondary-bg-rgb:   52,58,64;
  --bs-tertiary-bg:        #2B3035;
  --bs-tertiary-bg-rgb:    43,48,53;
  --bs-primary-bg-subtle:   #032830;
  --bs-secondary-bg-subtle: #161719;
  --bs-success-bg-subtle:   #051B11;
  --bs-warning-bg-subtle:   #332701;
  --bs-danger-bg-subtle:    #2C0B0E;
  --bs-info-bg-subtle:      #031633;
  --bs-light-bg-subtle:     #343A40;
  --bs-dark-bg-subtle:      #1A1D20;
  --bs-border-color:        #495057;
  --bs-primary-border-subtle:   #087990;
  --bs-secondary-border-subtle: #41464B;
  --bs-success-border-subtle:   #0F5132;
  --bs-warning-border-subtle:   #997404;
  --bs-danger-border-subtle:    #842029;
  --bs-info-border-subtle:      #084298;
  --bs-light-border-subtle:     #495057;
  --bs-dark-border-subtle:      #343A40;
}

/* No-JS / no stored choice: follow the OS. ww-theme.js always stamps an explicit data-bs-theme, so
   this block only matters when the script has not run. Mirrors the dark column above. */
@media (prefers-color-scheme: dark) {
  :root:not([data-bs-theme="light"]):not([data-bs-theme="dark"]) {
    color-scheme: dark;
    --bs-light: #495057;  --bs-light-rgb: 73,80,87;
    --bs-dark:  #F8F9FA;  --bs-dark-rgb:  248,249,250;
    --ww-urgent-light: #2B0A17; --ww-attention-light: #331904; --ww-completion-light: #06281E; --ww-misc-light: #140330;
    --bs-body-color: #F8F9FA; --bs-body-color-rgb: 248,249,250;
    --bs-secondary-color: rgba(248, 249, 250, 0.82); --bs-tertiary-color: rgba(248, 249, 250, 0.6); --bs-emphasis-color: #FFFFFF; --ww-tint-text: #F8F9FA;
    --bs-link-color: #1DCDFE; --bs-link-color-rgb: 29,205,254; --bs-link-hover-color: #19AED8;
    --bs-primary-text-emphasis: #6EDFF6; --bs-secondary-text-emphasis: #A7ACB1; --bs-success-text-emphasis: #75B798; --bs-warning-text-emphasis: #FFDA6A;
    --bs-danger-text-emphasis: #EA868F; --bs-info-text-emphasis: #6EA8FE; --bs-light-text-emphasis: #F8F9FA; --bs-dark-text-emphasis: #F8F9FA;
    --bs-body-bg: #212529; --bs-body-bg-rgb: 33,37,41; --bs-secondary-bg: #343A40; --bs-tertiary-bg: #2B3035;
    --bs-primary-bg-subtle: #032830; --bs-secondary-bg-subtle: #161719; --bs-success-bg-subtle: #051B11; --bs-warning-bg-subtle: #332701;
    --bs-danger-bg-subtle: #2C0B0E; --bs-info-bg-subtle: #031633; --bs-light-bg-subtle: #343A40; --bs-dark-bg-subtle: #1A1D20;
    --bs-border-color: #495057;
    --bs-primary-border-subtle: #087990; --bs-secondary-border-subtle: #41464B; --bs-success-border-subtle: #0F5132; --bs-warning-border-subtle: #997404;
    --bs-danger-border-subtle: #842029; --bs-info-border-subtle: #084298; --bs-light-border-subtle: #495057; --bs-dark-border-subtle: #343A40;
  }
}

/* Container padding reduces to 16px on small screens (PDF: Spacing). Variable only. */
@media (max-width: 767.98px) {
  :root { --ww-container-pad: 16px; --ww-gap: 16px; }
}