/* ===========================================================================
   RefrigiWear UI — design tokens v3 (source of truth)  ·  ENG-484, 2026-09-13
   The house style for every internal web app, dashboard and report.

   WHAT CHANGED IN v3 AND WHY
   v2 read as a generic AI-generated dashboard: Space Grotesk / JetBrains Mono,
   uppercase mono "kicker" labels with an accent tick, charcoal-on-charcoal
   surfaces, one signal colour, soft two-layer shadows, text-shadow on chrome.
   v3 takes its cues from the two systems our users already live in — Jira
   (Atlassian Design System) and the Microsoft 365 admin center (Fluent 2):
     · type      = the Microsoft standard: Fluent 2 Segoe UI stack and type ramp,
                   sentence case everywhere, numerals in the UI face (tabular)
     · neutrals  = Fluent 2 light + dark ladders (pure neutral, not warm/charcoal)
     · shape     = 4px controls, 8px cards, flat cards with a 1px stroke; shadows
                   only on things that float (menus, dialogs, toasts)
     · colour    = brand BLUE for interactive (links, primary buttons, selection),
                   derived from the official RefrigiWear accent blue; heritage GOLD
                   stays the brand accent (mark, active-nav bar, "now" chart mark)
     · themes    = ONE token set, LIGHT and DARK, via light-dark(). The page
                   follows the OS until the user toggles; data-theme on <html>
                   forces either (theme.js persists the choice).

   v3.1 — THE REFRIGIWEAR LAYER (ENG-705, 2026-09-24; decisions D1-D4, Andrew)
   v3 made the apps familiar; it did not make them RefrigiWear. v3.1 keeps the working
   surface exactly as it is and adds the brand in the places people notice:
     · D1 display = Roboto Condensed, the brand's official digital face, for DISPLAY
                   ONLY: page titles, KPI numbers, the wordmark (--rfw-display). Segoe
                   UI stays for everything people read and operate. Self-hosted below
                   (no request to Google from anyone's browser); OFL 1.1.
     · D2 chrome  = the official navy top bar in BOTH themes (v3 went neutral in dark,
                   which left a gold icon and a gold button as the only brand on screen).
     · D3 trim    = a 2px gold rule under the top bar (--rfw-trim), like the trim on the gear.
     · D4 Reggie  = the mascot on good-news states only, in the logo colours: navy on
                   light, white on dark (--rfw-reggie). Never tinted, never gold.

   HOW TO CONSUME
     <link rel="stylesheet" href="https://tokens.reggietek.com/tokens/rfw.css">
     :root { --ink: var(--rfw-ink, #242424); }   ← alias with a literal fallback
   Reference --rfw-* only; never hardcode a hex. Charts inside SVG must use the
   COMPUTED value (getComputedStyle) — var() does not resolve in SVG attributes on
   every print path.

   CONTRAST is asserted by refrigiwear-light/check_tokens.py (both themes, every
   ink-on-surface pair ≥ 4.5:1, every stroke/graphic ≥ 3:1). Run it before publishing.
   =========================================================================== */

/* ------------------------------------------------------------ display face (D1) */
/* Roboto Condensed, variable weight 600-700, served by the tokens worker from
   assets/fonts/ (licence: assets/fonts/OFL.txt). Absolute URLs, because apps load this
   file cross-origin and some keep a copy; the worker answers with CORS. latin-ext is
   fetched only when a character in its range is on the page. font-display: swap, so a
   title is never invisible while the face loads: it shows in Segoe first. */
@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url('https://tokens.reggietek.com/fonts/roboto-condensed-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url('https://tokens.reggietek.com/fonts/roboto-condensed-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: light dark;            /* follow the OS; native controls + scrollbars follow too */

  /* ---------------------------------------------------------------- brand */
  /* Interactive blue, hue taken from the official accent blue #5288CD and darkened
     until white text clears 4.5:1 (6.0:1). Same fill in both themes so a primary
     button is the same button everywhere; only TEXT-on-surface uses shifts. */
  --rfw-brand:      light-dark(#2963AE, #3874C8);   /* primary button / selected fill: white text ≥4.5, ≥3:1 vs surface */
  --rfw-brand-700:  light-dark(#235595, #3069B8);   /* hover                          */
  --rfw-brand-800:  light-dark(#1F4B84, #2A5EA6);   /* pressed                        */
  --rfw-brand-ink:  light-dark(#2963AE, #78A7E3);   /* links, selected text, icons    */
  --rfw-brand-50:   light-dark(#EAF1FA, #10253D);   /* tint fill (selected row, info) */
  --rfw-brand-line: light-dark(#B7CDEA, #2B4C74);   /* stroke on the tint             */
  --rfw-on-brand:   #FFFFFF;                        /* text on --rfw-brand            */
  --rfw-on-fill:    light-dark(#FFFFFF, #141414);   /* text on the status FILLS (ok/crit), which are light in dark mode */
  --rfw-tooltip-bg: light-dark(#242424, #F5F5F5);   /* inverted tooltip               */
  --rfw-tooltip-ink:light-dark(#FFFFFF, #242424);

  /* Heritage gold: the brand ACCENT, never the interactive colour. Fills, the Reggie
     mark, the active-nav bar, the chart "now" mark. Gold as small text only through
     --rfw-gold-ink (6.7:1 on white; bright gold itself is 1.6:1). */
  --rfw-gold:       #FFC400;
  --rfw-gold-ink:   light-dark(#705A00, #FFC400);
  --rfw-gold-50:    light-dark(#FFF6D6, #3A2E00);
  --rfw-gold-100:   light-dark(#FFE9A3, #5C4900);
  --rfw-gold-line:  light-dark(#ECD27A, #7A6200);

  /* ------------------------------------------------------------- surfaces */
  /* Fluent 2 neutral ladders. Light: canvas Background3, cards Background1.
     Dark: canvas Background2, cards Background1, hover Background6. */
  --rfw-bg:         light-dark(#F5F5F5, #1F1F1F);   /* page canvas                     */
  --rfw-surface:    light-dark(#FFFFFF, #292929);   /* cards, panels, inputs           */
  --rfw-surface-2:  light-dark(#FAFAFA, #333333);   /* hover / subtle / zebra          */
  --rfw-inset:      light-dark(#F0F0F0, #141414);   /* wells, code, table header       */
  --rfw-scrim:      light-dark(rgba(0,0,0,.40), rgba(0,0,0,.60));

  /* ---------------------------------------------------------------- lines */
  --rfw-line:       light-dark(#E0E0E0, #3D3D3D);   /* card + row hairline (Stroke2/3) */
  --rfw-line-2:     light-dark(#D1D1D1, #525252);   /* control stroke (Stroke1/2)      */
  --rfw-line-strong:light-dark(#616161, #8A8A8A);   /* accessible stroke ≥3:1          */

  /* ------------------------------------------------------------------ ink */
  --rfw-ink:        light-dark(#242424, #FFFFFF);   /* body           15.5 / 14.6      */
  --rfw-ink-2:      light-dark(#424242, #D6D6D6);   /* supporting     10.1 / 10.0      */
  --rfw-muted:      light-dark(#616161, #ADADAD);   /* labels, captions 6.2 / 6.5     */
  --rfw-disabled:   light-dark(#BDBDBD, #5C5C5C);

  /* ------------------------------------------------- topbar chrome (brand) */
  /* The official navy (PMS 296C) in BOTH themes — the one place the brand colour is
     structural, the way the M365 suite header carries its blue. v3 went neutral #141414
     in dark; v3.1 (D2) keeps the navy, so a dark-mode user still sees RefrigiWear. */
  --rfw-chrome:       #041C2C;
  --rfw-chrome-2:     #143349;                        /* hover surface on the chrome  */
  --rfw-chrome-line:  #1E3A50;
  --rfw-chrome-ink:   #FFFFFF;
  --rfw-chrome-muted: #B8C4D2;
  --rfw-trim:         var(--rfw-gold);                /* D3: 2px gold rule under the top bar */

  /* ------------------------------------------------------- display (v3.1) */
  /* D1: the brand face for DISPLAY ONLY — page titles, KPI numbers, the wordmark. Every
     other word stays in the Segoe stack. The fallback is the full UI stack, so a failed
     font load degrades to exactly v3. */
  --rfw-display:    'Roboto Condensed', var(--rfw-sys);
  --rfw-fw-display: 700;
  --rfw-fs-page:    32px;  --rfw-lh-page: 38px;       /* page title in the display face  */
  --rfw-fs-kpi:     36px;  --rfw-lh-kpi:  40px;       /* KPI number in the display face  */
  --rfw-fs-wordmark:19px;  --rfw-lh-wordmark: 24px;   /* "RefrigiWear" in the top bar    */

  /* ------------------------------------------------------------ Reggie (D4) */
  /* The mascot keeps the logo colour rule: navy on light, white on dark. Nothing else. */
  --rfw-reggie:     light-dark(#041C2C, #FFFFFF);

  /* -------------------------------------------------------------- side nav */
  /* Page-coloured, not chrome-coloured (Jira, M365). Active item = neutral fill +
     strong text + a 3px brand bar (Fluent nav); hover = subtle fill. Gold cannot
     be the bar on a light nav (1.3:1) — it stays on the navy topbar. */
  --rfw-nav-bg:         light-dark(#FFFFFF, #1F1F1F);
  --rfw-nav-line:       light-dark(#E0E0E0, #3D3D3D);
  --rfw-nav-ink:        light-dark(#242424, #FFFFFF);
  --rfw-nav-muted:      light-dark(#616161, #ADADAD);
  --rfw-nav-hover:      light-dark(#F5F5F5, #292929);
  --rfw-nav-active-bg:  light-dark(#EBEBEB, #333333);
  --rfw-nav-active-ink: light-dark(#242424, #FFFFFF);
  --rfw-nav-active-bar: var(--rfw-brand-ink);

  /* --------------------------------------------------------------- status */
  /* Fluent 2 status colours. -ink is text on the -50 tint AND on --rfw-surface
     (both ≥4.5:1); the bare token is the fill (icons, bars, badges with white text). */
  --rfw-ok:        light-dark(#107C10, #54B054);
  --rfw-ok-ink:    light-dark(#0E700E, #6CCB6C);
  --rfw-ok-50:     light-dark(#F1FAF1, #0B2B0B);
  --rfw-ok-line:   light-dark(#9FD89F, #1F6B1F);

  --rfw-warn:      light-dark(#DA3B01, #F7630C);     /* orange = warn only, never brand */
  --rfw-warn-ink:  light-dark(#A83B07, #FAA06B);
  --rfw-warn-50:   light-dark(#FFF4EC, #3A1A06);
  --rfw-warn-line: light-dark(#F7BC97, #8A3707);

  --rfw-crit:      light-dark(#C50F1F, #E37D86);
  --rfw-crit-ink:  light-dark(#B10E1C, #F09AA2);
  --rfw-crit-50:   light-dark(#FDF3F4, #3B1113);
  --rfw-crit-line: light-dark(#EEACB2, #8A1E27);

  --rfw-info:      var(--rfw-brand);
  --rfw-info-ink:  var(--rfw-brand-ink);
  --rfw-info-50:   var(--rfw-brand-50);
  --rfw-info-line: var(--rfw-brand-line);

  --rfw-idle-ink:  light-dark(#616161, #ADADAD);
  --rfw-idle-50:   light-dark(#F0F0F0, #333333);
  --rfw-idle-line: light-dark(#D1D1D1, #525252);

  /* ----------------------------------------------------------------- type */
  /* The Microsoft standard: Fluent 2 fontFamilyBase / fontFamilyMonospace, verbatim.
     Numerals use the UI face with tabular figures (class .rfw-num), not a mono face. */
  --rfw-sys:      'Segoe UI', 'Segoe UI Web (West European)', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue', sans-serif;
  --rfw-font:     var(--rfw-sys);
  --rfw-font-num: var(--rfw-sys);
  --rfw-mono:     Consolas, 'Courier New', Courier, monospace;   /* code and IDs only */

  /* Fluent 2 type ramp (size / line-height). Body 14/20 is the default. */
  --rfw-fs-caption:   12px;  --rfw-lh-caption:   16px;   /* captions, table headers, badges */
  --rfw-fs-body:      14px;  --rfw-lh-body:      20px;
  --rfw-fs-body-lg:   16px;  --rfw-lh-body-lg:   22px;   /* subtitle 2 at 600             */
  --rfw-fs-subtitle:  20px;  --rfw-lh-subtitle:  28px;   /* section titles at 600         */
  --rfw-fs-title:     24px;  --rfw-lh-title:     32px;
  --rfw-fs-title-lg:  28px;  --rfw-lh-title-lg:  36px;   /* page title at 600             */
  --rfw-fs-hero:      32px;  --rfw-lh-hero:      40px;   /* KPI number at 600             */
  --rfw-fs-display:   40px;  --rfw-lh-display:   52px;
  --rfw-fw-regular: 400;  --rfw-fw-semibold: 600;  --rfw-fw-bold: 700;

  /* ------------------------------------------------------------- geometry */
  --rfw-r:      8px;      /* cards, panels, menus          (Fluent XLarge)  */
  --rfw-r-sm:   4px;      /* buttons, inputs, badges       (Fluent Medium)  */
  --rfw-r-lg:   12px;     /* dialogs, toasts               (Fluent 2XLarge) */
  --rfw-r-pill: 999px;    /* chips, avatars, progress bars                  */
  --rfw-stroke: 1px;
  --rfw-control-h: 32px;  /* Fluent default control height                  */
  --rfw-target:    24px;  /* WCAG 2.2 minimum target                        */

  /* -------------------------------------------------------------- spacing */
  --rfw-sp-1: 4px; --rfw-sp-2: 8px; --rfw-sp-3: 12px; --rfw-sp-4: 16px;
  --rfw-sp-5: 20px; --rfw-sp-6: 24px; --rfw-sp-8: 32px;
  --rfw-gap: 12px;  --rfw-pad: 16px;

  /* ------------------------------------------------------------ elevation */
  /* Cards are FLAT: the 1px stroke defines the edge (Jira, M365). Shadows only on
     things that float. Fluent 2 shadow4 / shadow16 / shadow64. */
  --rfw-elev-1: none;
  --rfw-elev-2: 0 0 2px light-dark(rgba(0,0,0,.12), rgba(0,0,0,.24)), 0 2px 4px  light-dark(rgba(0,0,0,.14), rgba(0,0,0,.28));
  --rfw-elev-3: 0 0 2px light-dark(rgba(0,0,0,.12), rgba(0,0,0,.24)), 0 8px 16px light-dark(rgba(0,0,0,.14), rgba(0,0,0,.28));
  --rfw-elev-4: 0 0 8px light-dark(rgba(0,0,0,.12), rgba(0,0,0,.24)), 0 32px 64px light-dark(rgba(0,0,0,.14), rgba(0,0,0,.28));
  --rfw-shadow: var(--rfw-elev-1);              /* back-compat alias            */
  --rfw-text-shadow-chrome: none;               /* v2 text-shadow retired       */

  /* ---------------------------------------------------------------- focus */
  /* Two-ring focus (Atlassian): a gap in the page colour, then the brand ring. */
  --rfw-ring: 0 0 0 2px var(--rfw-bg), 0 0 0 4px var(--rfw-brand-ink);

  /* --------------------------------------------------------------- motion */
  --rfw-ease:     cubic-bezier(0.33, 0, 0.67, 1);   /* Fluent easyEase          */
  --rfw-ease-out: cubic-bezier(0, 0, 0, 1);         /* Fluent decelerateMid     */
  --rfw-dur:      150ms;                            /* Fluent durationFast      */
  --rfw-dur-2:    200ms;

  /* --------------------------------------------------------------- charts */
  /* Categorical, 8 hues, each ≥3:1 on its theme's surface. Read the COMPUTED value
     for SVG/canvas. --rfw-chart-now is the gold "current" mark. */
  --rfw-chart-1: light-dark(#2963AE, #78A7E3);   /* blue     */
  --rfw-chart-2: light-dark(#107C10, #54B054);   /* green    */
  --rfw-chart-3: light-dark(#6B5ED9, #A79CF2);   /* purple   */
  --rfw-chart-4: light-dark(#0B7A7A, #3FBFBF);   /* teal     */
  --rfw-chart-5: light-dark(#C50F1F, #E37D86);   /* red      */
  --rfw-chart-6: light-dark(#BC4B09, #FAA06B);   /* orange   */
  --rfw-chart-7: light-dark(#A4009B, #E27DD6);   /* magenta  */
  --rfw-chart-8: light-dark(#616161, #ADADAD);   /* gray     */
  --rfw-chart-now:  #FFC400;
  --rfw-chart-grid: light-dark(#D1D1D1, #525252);

  /* ------------------------------------------- v1 / v2 compatibility aliases */
  /* Older apps alias these names (Global MRP's local copy defined them). Keeping them
     means the hosted file cascades v3 into those apps with no edit; the semantics are
     the ones the apps relied on: "blue" was the primary action, "orange" the gold CTA
     while "orange-50/-line" were the warning tint. */
  --rfw-blue:        var(--rfw-brand);
  --rfw-blue-700:    var(--rfw-brand-700);
  --rfw-blue-50:     var(--rfw-brand-50);
  --rfw-blue-line:   var(--rfw-brand-line);
  --rfw-orange:      var(--rfw-gold);
  --rfw-orange-50:   var(--rfw-warn-50);
  --rfw-orange-line: var(--rfw-warn-line);
}

/* Forced themes. theme.js sets one of these on <html>; absent, the OS decides.
   Setting data-theme on any element forces its subtree, so a dark panel inside a
   light page needs no extra tokens. */
[data-theme="light"] { color-scheme: light; }
[data-theme="dark"]  { color-scheme: dark; }

/* Paper is light. A dark-mode user printing a report must not get dark pages. */
@media print { :root, [data-theme] { color-scheme: light; } }