/* FPL-001/REQ-002 FR-6 — the supplier theme, wired in exactly ONE place (DEC-015 §2: Fluent UI
   Blazor v5 is a supplier, never a design). This is the ONLY file in the product allowed to set a
   Fluent CSS custom property; a page/template/layout doing so fails the build with
   SUPPLIER_TOKEN_OUTSIDE_LAYER (a component's own folder is exempt per DEC-015 §2, once REQ-003
   builds one). MUST stay the last <link> in Frontend/wwwroot/index.html's head, forever — every
   stylesheet added later goes BEFORE this one, so overrides win over the supplier's own sheet.

   Outcomes below are the spike's (claude-docs/UI-FLUENT-V5.md, report FR-1), re-measured against
   this exact CSS the day it was wired here (see the codeperts execution body for the resolved
   values). Four supplier defaults are already correct and are deliberately NOT overridden here —
   writing a no-op override would be a literal masquerading as a decision:
     - body 14/20, small 12/16, title 20/28  → fontSizeBase300/200/500 + line-height twins: NO-OP
     - weights 400/500/600                   → fontWeightRegular/Medium/Semibold:            NO-OP
     - stroke 1px                            → strokeWidthThin:                              NO-OP
     - motion 100/150/200ms                  → durationFaster/Fast/Normal:                    NO-OP
*/

:root {
  /* typeface — the owner's live check of item 33 (2026-09-24): every Fluent component (Button, DataGrid header buttons, Tooltip) fell back to Fluent's own Segoe UI stack while the rest of the
     page is Inter; the sheet has ONE typeface. Same value the layer's own components read (--font-sans). */
  --fontFamilyBase: var(--font-sans);

  /* radius, all three steps — ACCEPTED (Medium was already 4; Small/Large were 2/6) */
  --borderRadiusSmall: var(--radius);
  --borderRadiusMedium: var(--radius);
  --borderRadiusLarge: var(--radius);

  /* brand accent + its two design-time derivations — ACCEPTED, set to the sheet's fixed hexes,
     never a generated ramp (not verified whether a generated ramp from --brand alone would match) */
  --colorBrandBackground: var(--brand);
  --colorBrandBackgroundHover: var(--accent-hover);
  --colorBrandBackground2: var(--accent-soft);

  /* neutrals: text / muted / hairline / surface — ACCEPTED for the contexts measured */
  --colorNeutralForeground1: var(--text);
  --colorNeutralForeground2: var(--text-secondary);
  --colorNeutralStroke1: var(--line);
  --colorNeutralBackground1: var(--surface);

  /* hover / pressed of the quiet buttons — the sheet's `.b-ghost` / `.b-secondary` / `.b-toggle` (02-actions.html:211-215, 219): hover --fill-1, pressed --neutral-bg, and the text STAYS --text. Fluent's own are #f5f5f5 /
     #e0e0e0 with a foreground change on hover (#242424) — and, under an OS dark scheme, #383838 / #2e2e2e with #ffffff (item 33's owner check, 2026-09-25: a ghost button "goes black on hover", contrast 1.26:1 against
     our #1f2933 text). index.html pins the supplier to light; these state the sheet's values so light is also the sheet's. */
  --colorSubtleBackgroundHover: var(--fill-1);
  --colorSubtleBackgroundPressed: var(--neutral-bg);
  --colorNeutralBackground1Hover: var(--fill-1);
  --colorNeutralBackground1Pressed: var(--neutral-bg);
  --colorNeutralForeground1Hover: var(--text);
  --colorNeutralForeground1Pressed: var(--text);
  --colorNeutralForeground2Hover: var(--text);
  --colorNeutralForeground2Pressed: var(--text);

  /* hover fill — ACCEPTED, but NOT universal: the select popup and the menu list both keep their
     own internal neutral defaults regardless of this override (a leak; catalogued in REQ-003) */
  --colorNeutralBackground2: var(--fill-1);

  /* caption 11/16 — COULD NOT BE EXPRESSED for any supplier-rendered text (no 11px step exists,
     and nothing Fluent renders itself uses a "caption" role) — reaches only text this layer writes */
  --fontSizeBase100: var(--fs-caption);
  --lineHeightBase100: var(--lh-caption);

  /* ease-out — COULD NOT BE EXPRESSED as a named curve (none is literally "ease-out"); the nearest
     named curve is overridden to the exact bezier, reaching only whichever animations reference it */
  --curveDecelerateMid: cubic-bezier(0, 0, 0.58, 1);

  /* the 16th row (FR-6) — the focus ring's two token-level halves. Set here; whether they actually
     land is a measurement, not a claim — see claude-docs/UI-LAYER.md's 16th supplier-table row for
     the resolved outcome. The spike measured the ring's box-shadow as hardcoded and unreachable;
     this build re-measures under this exact file before writing the outcome down. */
  --colorStrokeFocus2: var(--accent);
  --strokeWidthThick: var(--focus-w);

  /* NAME COLLISION (found in REQ-003, row 19/Grid) — Fluent's own JS module adopts a document-level
     stylesheet (`document.adoptedStyleSheets`, checked directly, not assumed) that ALSO defines
     custom properties literally named `--error` and `--info` — colliding with two of OUR OWN 315
     token names. Measured: `--error` silently resolved to Fluent's `var(--colorPaletteRedForeground1)`
     and `--info` to `var(--colorNeutralForeground3)`, GLOBALLY, everywhere either token is used in
     the whole app, not just in a Grid-owned selector — this is not a leak inside one component, it
     is the two token NAMES themselves being corrupted at :root. Checked exhaustively against all
     315 token names in tokens.css: exactly these two collide, no others. `!important` on our own
     declaration wins regardless of load order (adopted stylesheets apply after regular <link>
     stylesheets in the cascade, but !important sorts into a higher-priority bucket first,
     regardless of origin — verified empirically here, not assumed from the spec). */
  --error: #d13438 !important;
  --info: var(--accent) !important;
}