/*
  FlowSentry design system v3 — tokens (the only place colours, type, space, radius, elevation and motion are defined).

  Layers
  1. Primitives  --fs-slate-*, --fs-violet-*, --fs-ink-*: raw scales. Never use them in pages; use a semantic token.
  2. Semantic    --fs-color-*, --fs-text-*, --fs-space-*, --fs-radius-*, --fs-shadow-*, --fs-z-*, --fs-dur-*: what pages,
                 components and the Radzen bridge consume. Light on :root, dark under [data-theme="dark"].
  3. Legacy      the v2 names (--fs-canvas, --fs-text-muted, --fs-sev-high-soft …) aliased onto layer 2 so the ~60 scoped
                 .razor.css files keep working. New code uses layer 2.

  Theme: [data-theme="light"|"dark"] on <html>. The "system" preference is resolved to light or dark by js/theme.js
  (and the inline bootstrap in App.razor) from prefers-color-scheme, so CSS only ever sees two themes.
*/

:root {
  /* 1. Primitives */
  --fs-slate-0: #ffffff;
  --fs-slate-25: #fbfbfc;
  --fs-slate-50: #f6f7f9;
  --fs-slate-100: #eef0f4;
  --fs-slate-150: #e6e9ee;
  --fs-slate-200: #dde1e8;
  --fs-slate-300: #c9cfd9;
  --fs-slate-400: #98a1b0;
  --fs-slate-500: #6b7385;
  --fs-slate-600: #525a6b;
  --fs-slate-700: #3b4251;
  --fs-slate-800: #262b36;
  --fs-slate-850: #1b1f28;
  --fs-slate-900: #14171e;
  --fs-slate-950: #0a0b10;

  --fs-violet-50: #f4f2ff;
  --fs-violet-100: #ebe8ff;
  --fs-violet-200: #d8d2ff;
  --fs-violet-300: #bbb0ff;
  --fs-violet-400: #998aff;
  --fs-violet-500: #7766fa;
  --fs-violet-600: #5b4cf0;
  --fs-violet-700: #4b3dd6;
  --fs-violet-800: #3d32ad;
  --fs-violet-900: #2f2884;
  --fs-violet-950: #1c174f;
  --fs-ink-950: #0f0b2e;

  --fs-gradient-brand: linear-gradient(135deg, #5b4cf0 0%, #7c4dff 55%, #a35bff 100%);
  --fs-gradient-brand-soft: linear-gradient(135deg, rgba(91, 76, 240, 0.14), rgba(163, 91, 255, 0.10));

  /* 2. Semantic: type */
  --fs-font-sans: "Inter", "Inter var", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fs-font-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", "SF Mono", Consolas, monospace;
  --fs-font-features: "cv11", "ss01", "ss03";
  --fs-text-xs: 0.75rem;     /* 12 */
  --fs-text-sm: 0.8125rem;   /* 13 */
  --fs-text-base: 0.875rem;  /* 14 */
  --fs-text-md: 1rem;        /* 16 */
  --fs-text-lg: 1.125rem;    /* 18 */
  --fs-text-xl: 1.25rem;     /* 20 */
  --fs-text-2xl: 1.5rem;     /* 24 */
  --fs-text-3xl: 1.875rem;   /* 30 */
  --fs-text-4xl: 2.25rem;    /* 36 */
  --fs-leading-xs: 1rem;
  --fs-leading-sm: 1.125rem;
  --fs-leading-base: 1.25rem;
  --fs-leading-md: 1.5rem;
  --fs-leading-lg: 1.625rem;
  --fs-leading-xl: 1.75rem;
  --fs-leading-2xl: 2rem;
  --fs-leading-3xl: 2.25rem;
  --fs-leading-4xl: 2.5rem;
  --fs-tracking-tight: -0.011em;
  --fs-tracking-tighter: -0.021em;
  --fs-tracking-caps: 0.06em;
  --fs-weight-regular: 400;
  --fs-weight-medium: 500;
  --fs-weight-semibold: 600;
  --fs-weight-bold: 700;

  /* Space: 4px base, 8px rhythm (v2 values kept for 1–6 and 8) */
  --fs-space-0: 0;
  --fs-space-px: 1px;
  --fs-space-0-5: 0.125rem; /* 2 */
  --fs-space-1: 0.25rem;    /* 4 */
  --fs-space-2: 0.5rem;     /* 8 */
  --fs-space-3: 0.75rem;    /* 12 */
  --fs-space-4: 1rem;       /* 16 */
  --fs-space-5: 1.5rem;     /* 24 */
  --fs-space-6: 2rem;       /* 32 */
  --fs-space-7: 2.5rem;     /* 40 */
  --fs-space-8: 3rem;       /* 48 */
  --fs-space-9: 3.5rem;     /* 56 */
  --fs-space-10: 4rem;      /* 64 */
  --fs-space-11: 5rem;      /* 80 */
  --fs-space-12: 6rem;      /* 96 */

  /* Radius: controls 8, cards 14, pills only for tags/badges */
  --fs-radius-xs: 6px;
  --fs-radius-sm: 8px;
  --fs-radius-md: 10px;
  --fs-radius-lg: 14px;
  --fs-radius-xl: 20px;
  --fs-radius-pill: 999px;

  /* Metrics */
  --fs-control-h-sm: 32px;
  --fs-control-h: 36px;
  --fs-control-h-lg: 40px;
  --fs-appbar-h: 56px;
  --fs-rail-w: 68px;
  --fs-flyout-w: 260px;
  --fs-sidebar-w: var(--fs-flyout-w);
  --fs-sidebar-w-collapsed: var(--fs-rail-w);
  --fs-row-h: 40px;
  --fs-row-h-dense: 34px;
  --fs-content-max: 1600px;
  --fs-gutter: clamp(16px, 2.4vw, 32px);

  /* Z-index */
  --fs-z-base: 0;
  --fs-z-sticky: 10;
  --fs-z-appbar: 30;
  --fs-z-rail: 40;
  --fs-z-flyout: 50;
  --fs-z-popover: 60;
  --fs-z-drawer: 1000;
  --fs-z-modal: 1100;
  --fs-z-toast: 1200;
  --fs-z-palette: 1300;

  /* Motion */
  --fs-dur-fast: 120ms;
  --fs-dur: 200ms;
  --fs-dur-slow: 320ms;
  --fs-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --fs-ease-emphasised: cubic-bezier(0.3, 0, 0, 1.2);
  --fs-ease-exit: cubic-bezier(0.4, 0, 1, 1);

}

/* Colour: light (also a [data-theme="light"] island inside a dark page) */
:root,
[data-theme="light"] {
  color-scheme: light;

  --fs-color-canvas: #f6f7f9;
  --fs-color-surface: #ffffff;
  --fs-color-surface-raised: #ffffff;
  --fs-color-surface-sunken: #f2f4f7;
  --fs-color-surface-overlay: #ffffff;
  --fs-color-surface-hover: #f4f5f8;
  --fs-color-surface-selected: #f4f2ff;
  --fs-color-scrim: rgba(15, 18, 26, 0.42);
  --fs-color-appbar: rgba(246, 247, 249, 0.78);

  --fs-color-border-subtle: #eceef2;
  --fs-color-border: #e2e5eb;
  --fs-color-border-strong: #cbd1da;
  --fs-color-border-input: #d3d8e0;

  --fs-color-text-primary: #0f121a;
  --fs-color-text-secondary: #485061;
  --fs-color-text-tertiary: #5f6779;
  --fs-color-text-disabled: #9aa1ae;
  --fs-color-text-link: #5443e8;
  --fs-color-on-accent: #ffffff;

  --fs-color-accent: #5b4cf0;
  --fs-color-accent-hover: #4b3dd6;
  --fs-color-accent-pressed: #3d32ad;
  --fs-color-accent-solid: #5b4cf0;
  --fs-color-accent-solid-hover: #4b3dd6;
  --fs-color-accent-soft: #f1efff;
  --fs-color-accent-soft-hover: #e7e3ff;
  --fs-color-accent-border: #d6d0ff;
  --fs-color-accent-text: #4b3dd6;
  --fs-color-focus: #6d5efc;
  --fs-color-focus-ring: rgba(91, 76, 240, 0.22);

  --fs-color-brand: #0f0b2e;

  --fs-color-success-fg: #067647;
  --fs-color-success-bg: #ecfdf3;
  --fs-color-success-border: #abefc6;
  --fs-color-success-solid: #17b26a;
  --fs-color-warning-fg: #b54708;
  --fs-color-warning-bg: #fffaeb;
  --fs-color-warning-border: #fedf89;
  --fs-color-warning-solid: #f79009;
  --fs-color-danger-fg: #b42318;
  --fs-color-danger-bg: #fef3f2;
  --fs-color-danger-border: #fecdca;
  --fs-color-danger-solid: #d92d20;
  --fs-color-info-fg: #175cd3;
  --fs-color-info-bg: #eff8ff;
  --fs-color-info-border: #b2ddff;
  --fs-color-info-solid: #2e90fa;

  /* Severity / risk bands: strong text on a soft fill, plus a saturated dot. Names unchanged (tests use them). */
  --fs-color-sev-low-fg: #067647;
  --fs-color-sev-low-bg: #ecfdf3;
  --fs-color-sev-low-border: #abefc6;
  --fs-color-sev-low-dot: #17b26a;
  --fs-color-sev-medium-fg: #8f5f00;
  --fs-color-sev-medium-bg: #fefbe8;
  --fs-color-sev-medium-border: #fde68a;
  --fs-color-sev-medium-dot: #eab308;
  --fs-color-sev-high-fg: #c4320a;
  --fs-color-sev-high-bg: #fff4ed;
  --fs-color-sev-high-border: #ffd6ae;
  --fs-color-sev-high-dot: #f97316;
  --fs-color-sev-critical-fg: #b42318;
  --fs-color-sev-critical-bg: #fee4e2;
  --fs-color-sev-critical-border: #fda29b;
  --fs-color-sev-critical-dot: #d92d20;

  /* Charts: violet-led categorical palette, then the grid/axis/tooltip chrome. */
  --fs-chart-1: #5b4cf0;
  --fs-chart-2: #0ea5e9;
  --fs-chart-3: #14b8a6;
  --fs-chart-4: #f59e0b;
  --fs-chart-5: #ec4899;
  --fs-chart-6: #a78bfa;
  --fs-chart-7: #64748b;
  --fs-chart-8: #22c55e;
  --fs-chart-grid: #eceef2;
  --fs-chart-axis: #dde1e8;
  --fs-chart-label: #5f6779;

  /* Elevation: hairline border + layered soft shadow (e0..e4). */
  --fs-shadow-xs: 0 1px 2px rgba(16, 18, 27, 0.05);
  --fs-shadow-sm: 0 1px 2px rgba(16, 18, 27, 0.04), 0 1px 3px rgba(16, 18, 27, 0.05);
  --fs-shadow-md: 0 1px 2px rgba(16, 18, 27, 0.04), 0 6px 16px -4px rgba(16, 18, 27, 0.10);
  --fs-shadow-lg: 0 2px 6px -1px rgba(16, 18, 27, 0.06), 0 16px 40px -8px rgba(16, 18, 27, 0.16);
  --fs-shadow-xl: 0 4px 12px -2px rgba(16, 18, 27, 0.08), 0 32px 64px -12px rgba(16, 18, 27, 0.26);
  --fs-elevation-0: none;
  --fs-elevation-1: var(--fs-shadow-xs);
  --fs-elevation-2: var(--fs-shadow-sm);
  --fs-elevation-3: var(--fs-shadow-lg);
  --fs-elevation-4: var(--fs-shadow-xl);
  --fs-focus-ring: 0 0 0 3px var(--fs-color-focus-ring);
}

[data-theme="dark"] {
  color-scheme: dark;

  --fs-color-canvas: #0a0b10;
  --fs-color-surface: #111319;
  --fs-color-surface-raised: #161921;
  --fs-color-surface-sunken: #0d0f14;
  --fs-color-surface-overlay: #1a1d26;
  --fs-color-surface-hover: #1a1d25;
  --fs-color-surface-selected: #1d1a33;
  --fs-color-scrim: rgba(0, 0, 0, 0.6);
  --fs-color-appbar: rgba(10, 11, 16, 0.72);

  --fs-color-border-subtle: #1b1e27;
  --fs-color-border: #242834;
  --fs-color-border-strong: #343947;
  --fs-color-border-input: #2f3442;

  --fs-color-text-primary: #eceef3;
  --fs-color-text-secondary: #a8afbd;
  --fs-color-text-tertiary: #878f9e;
  --fs-color-text-disabled: #5c6372;
  --fs-color-text-link: #a397ff;
  --fs-color-on-accent: #ffffff;

  --fs-color-accent: #8b7dff;
  --fs-color-accent-hover: #a397ff;
  --fs-color-accent-pressed: #7766fa;
  --fs-color-accent-solid: #6656f5;
  --fs-color-accent-solid-hover: #7262fa;
  --fs-color-accent-soft: rgba(139, 125, 255, 0.14);
  --fs-color-accent-soft-hover: rgba(139, 125, 255, 0.22);
  --fs-color-accent-border: rgba(139, 125, 255, 0.36);
  --fs-color-accent-text: #b2a8ff;
  --fs-color-focus: #9a8dff;
  --fs-color-focus-ring: rgba(139, 125, 255, 0.34);

  --fs-color-brand: #d9d4ff;

  --fs-color-success-fg: #47cd89;
  --fs-color-success-bg: rgba(23, 178, 106, 0.13);
  --fs-color-success-border: rgba(71, 205, 137, 0.30);
  --fs-color-success-solid: #17b26a;
  --fs-color-warning-fg: #fdb022;
  --fs-color-warning-bg: rgba(247, 144, 9, 0.13);
  --fs-color-warning-border: rgba(253, 176, 34, 0.30);
  --fs-color-warning-solid: #f79009;
  --fs-color-danger-fg: #fa7a70;
  --fs-color-danger-bg: rgba(240, 68, 56, 0.14);
  --fs-color-danger-border: rgba(250, 122, 112, 0.32);
  --fs-color-danger-solid: #d92d20;
  --fs-color-info-fg: #6ab9fd;
  --fs-color-info-bg: rgba(46, 144, 250, 0.13);
  --fs-color-info-border: rgba(106, 185, 253, 0.30);
  --fs-color-info-solid: #2e90fa;

  --fs-color-sev-low-fg: #47cd89;
  --fs-color-sev-low-bg: rgba(23, 178, 106, 0.13);
  --fs-color-sev-low-border: rgba(71, 205, 137, 0.28);
  --fs-color-sev-low-dot: #2fd07e;
  --fs-color-sev-medium-fg: #f5c542;
  --fs-color-sev-medium-bg: rgba(234, 179, 8, 0.12);
  --fs-color-sev-medium-border: rgba(245, 197, 66, 0.28);
  --fs-color-sev-medium-dot: #facc15;
  --fs-color-sev-high-fg: #fd8d4c;
  --fs-color-sev-high-bg: rgba(249, 115, 22, 0.13);
  --fs-color-sev-high-border: rgba(253, 141, 76, 0.30);
  --fs-color-sev-high-dot: #fb7d2c;
  --fs-color-sev-critical-fg: #fa7a70;
  --fs-color-sev-critical-bg: rgba(240, 68, 56, 0.18);
  --fs-color-sev-critical-border: rgba(250, 122, 112, 0.36);
  --fs-color-sev-critical-dot: #f04438;

  --fs-chart-1: #8b7dff;
  --fs-chart-2: #38bdf8;
  --fs-chart-3: #2dd4bf;
  --fs-chart-4: #fbbf24;
  --fs-chart-5: #f472b6;
  --fs-chart-6: #c4b5fd;
  --fs-chart-7: #94a3b8;
  --fs-chart-8: #4ade80;
  --fs-chart-grid: #1d2029;
  --fs-chart-axis: #2a2e3a;
  --fs-chart-label: #878f9e;

  --fs-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.45);
  --fs-shadow-sm: inset 0 1px 0 rgba(255, 255, 255, 0.025), 0 1px 2px rgba(0, 0, 0, 0.5);
  --fs-shadow-md: inset 0 1px 0 rgba(255, 255, 255, 0.035), 0 8px 20px -6px rgba(0, 0, 0, 0.6);
  --fs-shadow-lg: inset 0 1px 0 rgba(255, 255, 255, 0.045), 0 18px 44px -10px rgba(0, 0, 0, 0.72);
  --fs-shadow-xl: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 32px 72px -12px rgba(0, 0, 0, 0.8);
}

/* 3. Legacy v2 aliases (keep: ~60 scoped stylesheets use them) */
:root,
[data-theme="light"],
[data-theme="dark"] {
  --fs-canvas: var(--fs-color-canvas);
  --fs-surface: var(--fs-color-surface);
  --fs-surface-raised: var(--fs-color-surface-raised);
  --fs-surface-sunken: var(--fs-color-surface-sunken);
  --fs-surface-alt: var(--fs-color-surface-sunken);
  --fs-border: var(--fs-color-border);
  --fs-border-strong: var(--fs-color-border-strong);

  --fs-text: var(--fs-color-text-primary);
  --fs-text-muted: var(--fs-color-text-secondary);
  --fs-text-subtle: var(--fs-color-text-tertiary);
  --fs-text-danger: var(--fs-color-danger-fg);

  --fs-brand-ink: var(--fs-color-accent-solid); /* v2 near-black CTA → accent, so dark-mode CTAs stay visible */
  --fs-brand: var(--fs-color-brand);
  --fs-accent: var(--fs-color-accent);
  --fs-accent-hover: var(--fs-color-accent-hover);
  --fs-accent-soft: var(--fs-color-accent-soft);
  --fs-focus: var(--fs-color-focus);

  --fs-sev-low: var(--fs-color-sev-low-fg);
  --fs-sev-medium: var(--fs-color-sev-medium-fg);
  --fs-sev-high: var(--fs-color-sev-high-fg);
  --fs-sev-critical: var(--fs-color-sev-critical-fg);
  --fs-sev-low-soft: var(--fs-color-sev-low-bg);
  --fs-sev-medium-soft: var(--fs-color-sev-medium-bg);
  --fs-sev-high-soft: var(--fs-color-sev-high-bg);
  --fs-sev-critical-soft: var(--fs-color-sev-critical-bg);

  --fs-fs-xs: var(--fs-text-xs);
  --fs-fs-sm: var(--fs-text-sm);
  --fs-fs-base: var(--fs-text-base);
  --fs-fs-md: var(--fs-text-md);
  --fs-fs-lg: var(--fs-text-lg);
  --fs-fs-xl: var(--fs-text-xl);
  --fs-fs-2xl: var(--fs-text-2xl);
  --fs-lh-tight: 1.2;
  --fs-lh-base: 1.5;

  --fs-transition: var(--fs-dur-fast) var(--fs-ease-standard);
  --fs-transition-slow: var(--fs-dur-slow) var(--fs-ease-standard);
  --fs-transition-med: var(--fs-dur) var(--fs-ease-standard);
  --fs-ring: var(--fs-focus-ring);
}

/* Text on a legacy --fs-accent fill: white on the light accent, near-black on the brightened dark accent (≥ 4.5:1). */
:root, [data-theme="light"] { --fs-text-inverse: #ffffff; }
[data-theme="dark"] { --fs-text-inverse: #0b0c12; }