/* WPSNA dark theme for Fluent UI Blazor v5.
   v5 dropped <FluentDesignTheme> (which injected design-token values at runtime). Its components and
   default-fuib.css read Fluent v3 design tokens (--colorNeutral*, --colorBrand*, …). This file maps
   those v5 tokens onto the shared **WPSI/WPSNA design tokens** defined in wpsi-fluent-theme.css
   (--wpsi-accent, --neutral-layer-*, --neutral-foreground-*, --neutral-stroke-*, status colors),
   so there is one source of truth for color. (var() resolves regardless of stylesheet order.) */

:root {
  color-scheme: dark;

  /* —— Brand ramp → WPSI accent —— */
  --colorBrandBackground: var(--wpsi-accent);
  --colorBrandBackgroundHover: var(--wpsi-accent-light);
  --colorBrandBackgroundPressed: var(--wpsi-accent-dark);
  --colorBrandBackgroundSelected: var(--wpsi-accent-dark);
  --colorBrandBackground2: var(--wpsi-accent-soft);
  --colorBrandBackgroundInverted: var(--wpsi-accent-light);
  --colorCompoundBrandBackground: var(--wpsi-accent);
  --colorCompoundBrandBackgroundHover: var(--wpsi-accent-light);
  --colorCompoundBrandBackgroundPressed: var(--wpsi-accent-dark);
  --colorBrandForeground1: var(--wpsi-accent-light);
  --colorBrandForeground2: var(--wpsi-accent-light);
  --colorBrandForegroundLink: var(--wpsi-accent-light);
  --colorBrandForegroundLinkHover: var(--neutral-foreground-hover);
  --colorBrandForegroundLinkPressed: var(--wpsi-accent);
  --colorBrandForegroundLinkSelected: var(--wpsi-accent-light);
  --colorCompoundBrandForeground1: var(--wpsi-accent-light);
  --colorCompoundBrandForeground1Hover: var(--neutral-foreground-hover);
  --colorCompoundBrandStroke: var(--wpsi-accent);
  --colorCompoundBrandStrokeHover: var(--wpsi-accent-light);
  --colorBrandStroke1: var(--wpsi-accent);
  --colorBrandStroke2: var(--wpsi-accent-dark);

  /* —— Neutral backgrounds → WPSI surfaces —— */
  --colorNeutralBackground1: var(--neutral-layer-1);
  --colorNeutralBackground1Hover: var(--neutral-layer-2);
  --colorNeutralBackground1Pressed: #0d0d0d;
  --colorNeutralBackground1Selected: var(--neutral-layer-2);
  --colorNeutralBackground2: var(--neutral-layer-2);
  --colorNeutralBackground2Hover: var(--neutral-layer-3);
  --colorNeutralBackground2Pressed: var(--neutral-layer-1);
  --colorNeutralBackground3: var(--neutral-layer-3);
  --colorNeutralBackground3Hover: var(--neutral-layer-4);
  --colorNeutralBackground4: var(--neutral-layer-4);
  --colorNeutralBackground4Hover: var(--neutral-fill-strong-rest);
  --colorNeutralBackground4Pressed: var(--neutral-layer-3);
  --colorNeutralBackground5: var(--neutral-fill-strong-rest);
  --colorNeutralBackground6: var(--neutral-fill-strong-hover);
  --colorNeutralBackgroundInverted: var(--neutral-foreground-rest);
  --colorNeutralBackgroundDisabled: var(--neutral-layer-2);
  --colorSubtleBackground: var(--neutral-fill-stealth-rest);
  --colorSubtleBackgroundHover: var(--neutral-fill-stealth-hover);
  --colorSubtleBackgroundPressed: var(--neutral-fill-stealth-active);
  --colorSubtleBackgroundSelected: var(--neutral-fill-stealth-hover);

  /* —— Neutral foregrounds → WPSI text —— */
  --colorNeutralForeground1: var(--neutral-foreground-rest);
  --colorNeutralForeground1Hover: var(--neutral-foreground-hover);
  --colorNeutralForeground1Pressed: var(--neutral-foreground-rest);
  --colorNeutralForeground2: var(--neutral-foreground-rest);
  --colorNeutralForeground2Hover: var(--neutral-foreground-hover);
  --colorNeutralForeground2Pressed: var(--neutral-foreground-rest);
  --colorNeutralForeground2BrandHover: var(--wpsi-accent-light);
  --colorNeutralForeground3: var(--neutral-foreground-hint);
  --colorNeutralForeground4: var(--neutral-foreground-hint);
  --colorNeutralForegroundDisabled: #5a5a5a;
  --colorNeutralForegroundInverted: var(--neutral-layer-1);
  --colorNeutralForegroundOnBrand: var(--accent-foreground-rest, #ffffff);
  --colorNeutralForegroundStaticInverted: #ffffff;

  /* —— Strokes / dividers → WPSI strokes —— */
  --colorNeutralStroke1: var(--neutral-stroke-rest);
  --colorNeutralStroke1Hover: var(--neutral-stroke-hover);
  --colorNeutralStroke1Pressed: var(--neutral-stroke-active);
  --colorNeutralStroke2: var(--neutral-stroke-divider);
  --colorNeutralStroke3: var(--neutral-stroke-divider);
  --colorNeutralStrokeAccessible: var(--neutral-foreground-hint);
  --colorNeutralStrokeAccessibleHover: #808080;
  --colorNeutralStrokeDisabled: var(--neutral-stroke-rest);
  --colorTransparentStroke: transparent;

  /* —— Status → WPSI semantic colors —— */
  --colorPaletteRedForeground1: var(--wpsi-metric-error);
  --colorPaletteRedBackground3: var(--error);
  --colorPaletteGreenForeground1: var(--wpsi-metric-success);
  --colorPaletteGreenBackground3: var(--success);
  --colorPaletteYellowForeground1: var(--wpsi-metric-warning);
  --colorStatusDangerBackground3: var(--error);
  --colorStatusDangerForeground1: var(--wpsi-metric-error);
  --colorStatusSuccessBackground3: var(--success);
  --colorStatusSuccessForeground1: var(--wpsi-metric-success);
  --colorStatusWarningForeground1: var(--wpsi-metric-warning);

  --colorStrokeFocus2: var(--neutral-foreground-hover);

  /* —— Base font family → WPSI —— */
  --fontFamilyBase: var(--font-base, "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, sans-serif);

  /* —— Layout tokens (spacing / radius / motion) v5 components rely on (Fluent v3 scale;
       non-color, so kept as literals). Values tightened slightly for denser forms. —— */
  --spacingHorizontalXS: 4px;
  --spacingHorizontalS: 8px;
  --spacingHorizontalSNudge: 6px;
  --spacingHorizontalMNudge: 10px;
  --spacingHorizontalM: 12px;
  --spacingHorizontalL: 16px;
  --spacingVerticalXS: 3px;
  --spacingVerticalS: 6px;
  --spacingVerticalSNudge: 5px;
  --spacingVerticalMNudge: 8px;
  --spacingVerticalM: 10px;
  --spacingVerticalL: 12px;
  --borderRadiusSmall: 2px;
  --borderRadiusMedium: 4px;
  --borderRadiusLarge: 6px;
  --borderRadiusCircular: 10000px;
  --strokeWidthThin: 1px;
  --strokeWidthThick: 2px;
  --durationFaster: 100ms;
  --durationNormal: 200ms;
  --curveLinear: cubic-bezier(0, 0, 1, 1);
  --curveEasyEase: cubic-bezier(0.33, 0, 0.67, 1);
  --fontWeightRegular: 400;
  --fontWeightMedium: 500;
  --fontWeightSemibold: 600;
}