/* Segproof design tokens — v1 (2026-10-17)
   One file, three consumers:
   1. The app (src/SegProof.Web/wwwroot/app.css): import this first, then the Fluent overrides below apply.
   2. The website (website/styles.css): import this and use the --sp-* variables.
   3. Anything else that can read CSS.
   Source of truth: the "Segproof design system" canvas (Colour, Typography, Tokens artboards). */

:root {
  /* Ground — bulwark navy */
  --sp-navy-900: #0B1628;
  --sp-navy-800: #10213A;
  --sp-navy-700: #172C4A;
  --sp-navy-600: #23405F;
  --sp-on-navy: #DCE4EE;
  --sp-on-navy-muted: #9FB0C4;
  --sp-on-navy-link: #7FB0E8;
  --sp-navy-border: #4A617F;

  /* Primary — steel */
  --sp-steel-700: #214B76;   /* pressed */
  --sp-steel-600: #2B5F94;   /* links, primary buttons, focus ring, Pending */
  --sp-steel-500: #3F7CBF;   /* hover */
  --sp-steel-50:  #E7EFF8;   /* tint */
  --sp-steel-border: #B9D0EA;

  /* Signal — bronze (one action per surface; website and email. In the app only as bronze 700 text on bronze 50: the Free-plan chip and the warning banner) */
  --sp-bronze-700: #8C5A12;  /* text on light */
  --sp-bronze-600: #B8781F;
  --sp-bronze-500: #D9962F;  /* CTA fill on navy, the check in the mark */
  --sp-bronze-50:  #FBF1DE;
  --sp-bronze-border: #E9CF9A;

  /* Status — always icon + word + colour */
  --sp-pass: #1A7A39;         --sp-pass-tint: #E6F4EA;        --sp-pass-border: #B7DFC3;
  --sp-fail: #B42318;         --sp-fail-tint: #FBEAE7;        --sp-fail-border: #F1B8B0;
  --sp-inconclusive: #B54708; --sp-inconclusive-tint: #FCEEE4; --sp-inconclusive-border: #F3C9AD;
  --sp-stale: #5F6B7A;        --sp-stale-tint: #EEF1F5;
  --sp-pending: var(--sp-steel-600); --sp-pending-tint: var(--sp-steel-50);
  --sp-paused: #5F6B7A;       --sp-paused-tint: #EEF1F5;
  --sp-online: var(--sp-pass);
  --sp-offline: var(--sp-fail);
  /* Agent flags (SPEC §7): warning flags share the Inconclusive amber, informational flags share steel. */
  --sp-flag-warning: var(--sp-inconclusive);      /* No zone, Multiple zones, Multiple subnets */
  --sp-flag-info: var(--sp-steel-600);            /* Update available */

  /* Neutrals — cool, never pure grey */
  --sp-text: #15202E;
  --sp-text-muted: #5A6675;   /* 5.85:1 on white */
  --sp-text-faint: #8A96A5;   /* decorative only, not for reading text */
  --sp-border: #D6DCE4;
  --sp-border-strong: #B9C2CE;
  --sp-border-control: #7A8798;  /* input and select outlines: 3.65:1 on white (controls need 3:1); card edges keep --sp-border */
  --sp-surface: #FFFFFF;
  --sp-surface-2: #F4F6F9;
  --sp-canvas: #EEF1F5;       /* app page background behind cards */

  /* Type */
  --sp-font: "Archivo", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --sp-font-mono: "JetBrains Mono", Consolas, Menlo, "SF Mono", monospace;
  --sp-wdth-display: 118;  /* font-variation-settings: "wdth" n — hero only */
  --sp-wdth-heading: 110;  /* h1, section titles */
  --sp-wdth-text: 100;
  --sp-wdth-dense: 90;     /* dense tables, letterhead small print */
  --sp-fs-display: 56px;  --sp-lh-display: 1.06;
  --sp-fs-h1: 32px;       --sp-lh-h1: 1.18;    /* app h1 is 26px */
  --sp-fs-h2: 22px;       --sp-lh-h2: 1.27;    /* app h2 is 16px/600 */
  --sp-fs-body: 16px;     --sp-lh-body: 1.55;
  --sp-fs-ui: 14px;       --sp-lh-ui: 1.43;
  --sp-fs-table: 13px;
  --sp-fs-caption: 12px;
  --sp-fs-mono: 13px;
  --sp-track-display: -0.025em;
  --sp-track-heading: -0.02em;
  --sp-track-wordmark: -0.03em;
  --sp-track-eyebrow: 0.12em;

  /* Space — 4 px base */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px; --sp-5: 20px;
  --sp-6: 24px; --sp-8: 32px; --sp-12: 48px; --sp-16: 64px; --sp-20: 80px;

  /* Radius */
  --sp-radius-chip: 4px;
  --sp-radius-control: 6px;
  --sp-radius-card: 8px;
  --sp-radius-site-card: 10px;

  /* Elevation — navy-tinted, only for things that float */
  --sp-shadow-1: 0 1px 2px rgba(11, 22, 40, 0.08), 0 4px 12px rgba(11, 22, 40, 0.08);
  --sp-shadow-2: 0 8px 24px rgba(11, 22, 40, 0.16), 0 24px 60px rgba(11, 22, 40, 0.18);

  /* Layout */
  --sp-sidebar-w: 232px;
  --sp-topbar-h: 56px;
  --sp-control-h: 32px;
  --sp-control-h-topbar: 36px;
  --sp-control-h-site: 48px;
  --sp-site-max: 1120px;
  --sp-site-gutter: 24px;
  --sp-email-w: 600px;

  /* Motion */
  --sp-ease: cubic-bezier(0.2, 0, 0, 1);
  --sp-t-fast: 120ms;
  --sp-t-base: 200ms;

  /* Focus */
  --sp-focus: 0 0 0 2px var(--sp-surface), 0 0 0 4px var(--sp-steel-600);
  --sp-focus-on-navy: 0 0 0 2px var(--sp-navy-900), 0 0 0 4px var(--sp-on-navy-link);  /* light steel: bronze never appears inside the app, so the sidebar's focus ring is steel too; the website may use bronze on navy */
}

/* ---------------------------------------------------------------------------
   Fluent UI Blazor overrides (app only). Fluent reads these custom properties;
   setting them here re-themes every Fluent component without touching Razor.
   Keep <body data-theme="light" data-theme-color="#2B5F94"> in App.razor so
   Fluent derives its brand ramp from steel 600 (replaces #0F6CBD, D-018 note).
   --------------------------------------------------------------------------- */
body {
  --colorBrandBackground: var(--sp-steel-600);
  --colorBrandBackgroundHover: var(--sp-steel-500);
  --colorBrandBackgroundPressed: var(--sp-steel-700);
  --colorBrandBackground2: var(--sp-steel-50);
  --colorBrandForeground1: var(--sp-steel-600);
  --colorBrandForegroundLink: var(--sp-steel-600);
  --colorBrandForegroundLinkHover: var(--sp-steel-700);
  --colorBrandStroke1: var(--sp-steel-600);
  --colorBrandStroke2: var(--sp-steel-border);
  --colorCompoundBrandBackground: var(--sp-steel-600);
  --colorCompoundBrandStroke: var(--sp-steel-600);
  --colorStrokeFocus2: var(--sp-steel-600);

  --colorNeutralForeground1: var(--sp-text);
  --colorNeutralForeground2: var(--sp-text);
  --colorNeutralForeground3: var(--sp-text-muted);
  --colorNeutralForeground4: var(--sp-text-muted);
  --colorNeutralForegroundDisabled: var(--sp-text-faint);
  --colorNeutralBackground1: var(--sp-surface);
  --colorNeutralBackground2: var(--sp-surface-2);
  --colorNeutralBackground3: var(--sp-canvas);
  --colorNeutralBackground1Hover: var(--sp-surface-2);
  --colorNeutralStroke1: var(--sp-border-control);   /* input and select outlines */
  --colorNeutralStroke2: var(--sp-border);
  --colorNeutralStrokeAccessible: var(--sp-text-muted);

  --colorStatusSuccessForeground1: var(--sp-pass);
  --colorStatusSuccessBackground1: var(--sp-pass-tint);
  --colorStatusSuccessBorder1: var(--sp-pass-border);
  --colorStatusDangerForeground1: var(--sp-fail);
  --colorStatusDangerBackground1: var(--sp-fail-tint);
  --colorStatusDangerBorder1: var(--sp-fail-border);
  --colorStatusWarningForeground1: var(--sp-inconclusive);
  --colorStatusWarningBackground1: var(--sp-inconclusive-tint);
  --colorStatusWarningBorder1: var(--sp-inconclusive-border);
  --colorPaletteRedBackground3: var(--sp-fail);

  --fontFamilyBase: var(--sp-font);
  --fontFamilyMonospace: var(--sp-font-mono);
  --borderRadiusSmall: var(--sp-radius-chip);
  --borderRadiusMedium: var(--sp-radius-control);
  --borderRadiusLarge: var(--sp-radius-card);
  --shadow4: var(--sp-shadow-1);
  --shadow16: var(--sp-shadow-2);
}