/* =============================================================================
   SectraTEK design tokens - v1.0 (Phase 0)
   Single source of truth for color, type, space, radius, elevation, z-index,
   layout, and motion. Colors are the BRAND_TOKENS.md values; derived tokens are
   marked "derived" and are verified by tools/contrast.py (zero failures).

   Theme model
     light            default (:root)
     dark             prefers-color-scheme: dark unless data-theme="light",
                      or data-theme="dark" (the user toggle always wins)
     forced-colors    Windows High Contrast / forced colors, system colors only

   Scoped themes: any element may carry data-theme-scope="light" or "dark" to render its
   subtree in that theme regardless of the page theme (gallery pairs, navy-on-light previews,
   visual regression). The page theme itself is chosen with data-theme on <html>.

   Rules (SECURITY_FOUNDATION SIT-12): no value here is applied with a style
   attribute. Components read tokens; nothing types a duration or color by hand.

   The "@theme" comment markers are read by tools/contrast.py and
   tools/build_tokens.py. Keep them. The two dark blocks must stay identical.

   Breakpoints (CSS cannot put variables in media queries; use these literals,
   in em so browser zoom and text size reflow correctly):
     --bp-xs   320px  = 20em       minimum supported width (reflow, WCAG 1.4.10)
     --bp-sm   390px  = 24.375em   current phones
     --bp-md   768px  = 48em       tablet portrait
     --bp-lg  1024px  = 64em       tablet landscape, small laptop
     --bp-xl  1280px  = 80em       desktop; ruggedized tablet landscape (1280x800)
     --bp-2xl 1920px  = 120em      large desktop
   Prefer container queries for components (container-type: inline-size) and
   viewport queries only for page shells.
   ============================================================================= */

/* ----------------------------------------------------------------------------
   Theme-independent tokens
   ---------------------------------------------------------------------------- */
:root {
  /* Type: families. System stack leads; fonts.css (Phase 1) puts Inter first on the public site. */
  --font-system: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Segoe UI Variable Text", "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-sans: var(--font-system);
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Mono", Menlo, Consolas, monospace;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* Type: named steps (font-size). Display, h1, h2 are fluid; the rest are fixed. */
  --text-display: clamp(2.5rem, 1.4rem + 5vw, 6rem);       /* 40 -> 96 px */
  --text-h1: clamp(2.25rem, 1.5rem + 3.2vw, 4rem);          /* 36 -> 64 px */
  --text-h2: clamp(1.75rem, 1.2rem + 2vw, 2.75rem);         /* 28 -> 44 px */
  --text-h3: 1.5rem;                                        /* 24 px */
  --text-h4: 1.25rem;                                       /* 20 px */
  --text-lead: 1.1875rem;                                   /* 19 px */
  --text-body: 1.0625rem;                                   /* 17 px, content pages */
  --text-ui: 0.9375rem;                                     /* 15 px, apps (Comfortable) */
  --text-small: 0.875rem;                                   /* 14 px */
  --text-caption: 0.8125rem;                                /* 13 px */
  --text-micro: 0.75rem;                                    /* 12 px, minimum anywhere */
  --text-mono: 0.875rem;                                    /* 14 px */

  /* Type: line heights */
  --lh-display: 1.02;
  --lh-h1: 1.07;
  --lh-h2: 1.12;
  --lh-h3: 1.25;
  --lh-h4: 1.3;
  --lh-lead: 1.5;
  --lh-body: 1.58;
  --lh-ui: 1.45;
  --lh-small: 1.5;
  --lh-tight: 1.2;

  /* Type: tracking (negative on large sizes, Apple-like; neutral on mono) */
  --track-display: -0.035em;
  --track-h1: -0.03em;
  --track-h2: -0.022em;
  --track-h3: -0.014em;
  --track-h4: -0.01em;
  --track-body: -0.011em;
  --track-ui: -0.006em;
  --track-eyebrow: 0.08em;

  /* Space: 4/8 base. Names are scale steps; px in the comment. */
  --space-0: 2px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;
  --space-11: 160px;
  --section-y: clamp(4rem, 3rem + 6vw, 10rem);               /* 64 -> 160 px */
  --gutter: clamp(16px, 4vw, 32px);

  /* Layout */
  --content-max: 1200px;
  --content-wide: 1440px;
  --measure: 68ch;                                           /* 60-75 characters */
  --header-h: 64px;
  --topbar-h: 56px;
  --sidebar-w: 264px;
  --rail-w: 72px;
  --env-ribbon-h: 28px;

  /* Controls and density. Comfortable is the default; set data-density on any ancestor. */
  --ctl-h: 40px;
  --ctl-h-sm: 32px;
  --ctl-h-lg: 48px;
  --row-h: 48px;
  --row-pad: 12px;
  --text-ui-density: var(--text-ui);
  --target-min: 24px;                                         /* WCAG 2.2 SC 2.5.8 floor */
  --target-touch: 44px;

  /* Radius */
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-ctl: 10px;
  --radius-md: 12px;
  --radius-card: 14px;
  --radius-xl: 20px;
  --radius-pill: 999px;

  /* Icon sizes. Stroke is 1.5 in the 24 grid; see design-language.md. */
  --icon-sm: 16px;
  --icon-md: 20px;
  --icon-lg: 24px;
  --icon-xl: 32px;

  /* Border widths */
  --bw: 1px;
  --bw-strong: 1.5px;
  --focus-width: 2px;
  --focus-offset: 2px;

  /* z-index scale */
  --z-base: 0;
  --z-raised: 10;
  --z-sticky: 100;
  --z-header: 200;
  --z-dropdown: 300;
  --z-overlay: 400;
  --z-dialog: 500;
  --z-toast: 600;
  --z-tooltip: 700;
  --z-skip: 1000;

  /* Motion: durations (plan 11.5.1) */
  --dur-instant: 80ms;      /* press feedback; the focus ring has no transition */
  --dur-fast: 150ms;        /* hover, toggle, tab underline */
  --dur-base: 240ms;        /* dropdown, accordion, switch cross-fade, page transition */
  --dur-slow: 400ms;        /* dialog, sheet, palette */
  --dur-hero: 640ms;        /* hero and scene entrances, one per viewport */
  --dur-spring: 420ms;      /* spring settle ceiling for sheets, switch thumb, toasts */
  --dur-pulse: 1400ms;      /* skeleton opacity pulse */
  --dur-spin: 800ms;        /* spinner turn, linear */
  --dur-live: 1200ms;       /* live-row highlight */
  --dur-indeterminate: 1600ms;  /* indeterminate progress sweep */
  --dur-beacon: 2000ms;     /* live-connection dot pulse */
  --dur-undo: 8000ms;       /* undo toast window (Staff Console) */
  --dur-fade-reduced: 120ms;
  --skeleton-delay: 200ms;  /* skeleton appears only after this */
  --skeleton-min: 300ms;    /* and, once shown, stays at least this long (script rule) */

  /* Motion: easing */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: linear(0, 0.035, 0.125, 0.247, 0.383, 0.52, 0.649, 0.763, 0.859, 0.937, 0.995, 1.037, 1.064, 1.078, 1.083, 1.081, 1.075, 1.065, 1.053, 1.042, 1.031, 1.021, 1.013, 1.006, 1.001, 0.997, 1);
  --ease-linear: linear;
  --exit-ratio: 0.7;        /* exits run at 70 percent of the enter duration */

  /* Motion: distance and rhythm */
  --stagger: 40ms;          /* classes .d1 to .d6, never an inline style */
  --stagger-max: 6;
  --shift-sm: 12px;         /* translateY for reveals */
  --shift-lg: 24px;         /* translateY for hero */
  --scale-press: 0.98;
  --scale-enter: 0.96;
}

/* ----------------------------------------------------------------------------
   Density profiles (Staff Console 5.2). Apply to any container.
   ---------------------------------------------------------------------------- */
:root[data-density="comfortable"], [data-density="comfortable"] { --row-h: 48px; --row-pad: 12px; --ctl-h: 40px; --text-ui-density: 0.9375rem; }
:root[data-density="compact"], [data-density="compact"]         { --row-h: 36px; --row-pad: 8px;  --ctl-h: 34px; --text-ui-density: 0.875rem; }
:root[data-density="dense"], [data-density="dense"]             { --row-h: 28px; --row-pad: 4px;  --ctl-h: 28px; --text-ui-density: 0.8125rem; }

/* Coarse pointers (tablet, phone): 44 px targets (UX-09) */
@media (pointer: coarse) {
  :root { --ctl-h: 44px; --ctl-h-sm: 40px; --ctl-h-lg: 52px; --row-h: 52px; }
  :root[data-density="dense"], [data-density="dense"],
  :root[data-density="compact"], [data-density="compact"] { --ctl-h: 40px; --row-h: 44px; }
}

/* ----------------------------------------------------------------------------
   Color: light (default)
   ---------------------------------------------------------------------------- */
/* @theme light */
:root, [data-theme-scope="light"] {
  color-scheme: light;

  /* Surfaces (brand) */
  --bg: #f5f5f7;
  --canvas: #f5f5f7;
  --surface: #ffffff;
  --surface-2: #f5f5f7;
  --surface-3: #ececee;
  --surface-raised: #ffffff;            /* derived: selected segment, thumb, raised chip on a tinted track */
  --hair: #e4e4e9;
  --line: #d2d2d7;
  --line-strong: #c7c7cc;
  --control-border: #86868b;            /* derived: 3:1 on surface and bg (WCAG 1.4.11) */

  /* Text */
  --ink: #1d1d1f;
  --ink-2: #424245;                     /* derived: secondary text with more weight than muted */
  --muted: #6e6e73;

  /* SectraTEK blue (the only interface accent) */
  --accent: #0071e3;
  --accent-fill: #0071e3;               /* solid fills that carry white text */
  --accent-strong: #0058b9;
  --accent-2: #0a84ff;
  --accent-soft: #e8f1fe;
  --accent-glow: rgba(0, 113, 227, 0.22);
  --on-accent: #ffffff;
  --link: #0058b9;
  --link-hover: #00448f;                /* derived */
  --focus: #0071e3;
  --focus-on-navy: #6fb6ff;
  --selection: rgba(0, 113, 227, 0.22);
  --highlight: #e8f1fe;                 /* live-row insert */

  /* Navy bands (hero, header bar, footer attribution) */
  --navy: #0c1d31;
  --navy-2: #07131f;
  --glow: #14396b;
  --on-navy: #ffffff;
  --on-navy-2: rgba(255, 255, 255, 0.72);
  --navy-line: rgba(255, 255, 255, 0.16);
  --navy-accent: #4a9bf5;
  --navy-blue: #2b8fe0;

  /* Ratings and status only (always with text and an icon shape) */
  --info: #2f73b7;
  --info-ink: #1f5a99;
  --info-soft: #e8f1fe;
  --success: #1f7a4d;
  --success-ink: #195f3c;
  --success-soft: #e7f4ec;
  --warning: #8a5a12;
  --warning-ink: #70480c;
  --warning-soft: #fbf0db;
  --danger: #b42318;
  --danger-ink: #98170d;
  --danger-soft: #fdecea;

  /* Annotation (numbered callouts that mirror the familiarization guides; NOT a rating or status; L30) */
  --annotation: #c4271d;
  --on-annotation: #ffffff;

  /* Inverse surfaces (tooltip, toast) */
  --inverse-bg: #1d1d1f;
  --inverse-fg: #f5f5f7;
  --inverse-accent: #6fb6ff;

  /* Glass, scrim, gradients */
  --scrim: rgba(0, 0, 0, 0.40);
  --glass: rgba(255, 255, 255, 0.72);
  --glass-line: rgba(0, 0, 0, 0.08);
  --grad: linear-gradient(135deg, #0071e3 0%, #4a9bf5 100%);
  --grad-navy: radial-gradient(120% 260% at 12% -60%, #14396b 0%, #0c1d31 52%, #07131f 100%);
  --grad-navy-hero: radial-gradient(90% 120% at 18% -20%, #14396b 0%, #0c1d31 55%, #07131f 100%);

  /* Elevation */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.04), 0 6px 18px rgba(0, 0, 0, 0.06);
  --shadow-2: 0 2px 6px rgba(0, 0, 0, 0.06), 0 14px 36px rgba(0, 0, 0, 0.12);
  --shadow-3: 0 4px 12px rgba(0, 0, 0, 0.08), 0 28px 70px rgba(0, 0, 0, 0.18);
  --shadow-inset: inset 0 0 0 1px var(--line);
  --ring-accent: 0 0 0 4px var(--accent-glow);
}
/* @end */

/* ----------------------------------------------------------------------------
   Color: dark (OS preference unless the user chose light)
   ---------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
/* @theme dark */
:root:not([data-theme="light"]) {
  color-scheme: dark;

  --bg: #0a0809;
  --canvas: #0f0c0d;
  --surface: #1a1517;
  --surface-2: #211a1c;
  --surface-3: #2b2224;
  --surface-raised: #3a3033;
  --hair: rgba(255, 255, 255, 0.06);
  --line: rgba(255, 255, 255, 0.10);
  --line-strong: rgba(255, 255, 255, 0.19);
  --control-border: #8a8083;

  --ink: #f1ecec;
  --ink-2: #d6cdd0;
  --muted: #b4a9ac;

  --accent: #3e97ec;
  --accent-fill: #2272d3;
  --accent-strong: #6fb6ff;
  --accent-2: #6fb6ff;
  --accent-soft: rgba(62, 151, 236, 0.16);
  --accent-glow: rgba(62, 151, 236, 0.30);
  --on-accent: #ffffff;
  --link: #9ccdff;
  --link-hover: #c4e0ff;
  --focus: #6fb6ff;
  --focus-on-navy: #6fb6ff;
  --selection: rgba(62, 151, 236, 0.35);
  --highlight: rgba(62, 151, 236, 0.16);

  --navy: #06111e;
  --navy-2: #0b1b2c;
  --glow: #12315a;
  --on-navy: #f1ecec;
  --on-navy-2: rgba(241, 236, 236, 0.72);
  --navy-line: rgba(255, 255, 255, 0.14);
  --navy-accent: #6fb6ff;
  --navy-blue: #6fb6ff;

  --info: #68a7df;
  --info-ink: #68a7df;
  --info-soft: rgba(104, 167, 223, 0.16);
  --success: #48d19b;
  --success-ink: #48d19b;
  --success-soft: rgba(72, 209, 155, 0.14);
  --warning: #e6b768;
  --warning-ink: #e6b768;
  --warning-soft: rgba(230, 183, 104, 0.14);
  --danger: #f0928a;
  --danger-ink: #f0928a;
  --danger-soft: rgba(240, 146, 138, 0.14);

  --annotation: #c4271d;
  --on-annotation: #ffffff;

  --inverse-bg: #f1ecec;
  --inverse-fg: #1d1d1f;
  --inverse-accent: #0058b9;

  --scrim: rgba(0, 0, 0, 0.60);
  --glass: rgba(18, 13, 14, 0.66);
  --glass-line: rgba(255, 255, 255, 0.10);
  --grad: linear-gradient(135deg, #2c7fd0 0%, #3e97ec 100%);
  --grad-navy: radial-gradient(120% 260% at 12% -60%, #12315a 0%, #06111e 55%, #0b1b2c 100%);
  --grad-navy-hero: radial-gradient(90% 120% at 18% -20%, #12315a 0%, #06111e 58%, #0b1b2c 100%);

  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4), 0 12px 34px rgba(0, 0, 0, 0.42);
  --shadow-2: 0 2px 6px rgba(0, 0, 0, 0.5), 0 18px 44px rgba(0, 0, 0, 0.55);
  --shadow-3: 0 4px 12px rgba(0, 0, 0, 0.55), 0 30px 80px rgba(0, 0, 0, 0.6);
  --shadow-inset: inset 0 0 0 1px var(--line);
  --ring-accent: 0 0 0 4px var(--accent-glow);
}
/* @end */
}

/* @theme dark */
:root[data-theme="dark"], [data-theme-scope="dark"] {
  color-scheme: dark;

  --bg: #0a0809;
  --canvas: #0f0c0d;
  --surface: #1a1517;
  --surface-2: #211a1c;
  --surface-3: #2b2224;
  --surface-raised: #3a3033;
  --hair: rgba(255, 255, 255, 0.06);
  --line: rgba(255, 255, 255, 0.10);
  --line-strong: rgba(255, 255, 255, 0.19);
  --control-border: #8a8083;

  --ink: #f1ecec;
  --ink-2: #d6cdd0;
  --muted: #b4a9ac;

  --accent: #3e97ec;
  --accent-fill: #2272d3;
  --accent-strong: #6fb6ff;
  --accent-2: #6fb6ff;
  --accent-soft: rgba(62, 151, 236, 0.16);
  --accent-glow: rgba(62, 151, 236, 0.30);
  --on-accent: #ffffff;
  --link: #9ccdff;
  --link-hover: #c4e0ff;
  --focus: #6fb6ff;
  --focus-on-navy: #6fb6ff;
  --selection: rgba(62, 151, 236, 0.35);
  --highlight: rgba(62, 151, 236, 0.16);

  --navy: #06111e;
  --navy-2: #0b1b2c;
  --glow: #12315a;
  --on-navy: #f1ecec;
  --on-navy-2: rgba(241, 236, 236, 0.72);
  --navy-line: rgba(255, 255, 255, 0.14);
  --navy-accent: #6fb6ff;
  --navy-blue: #6fb6ff;

  --info: #68a7df;
  --info-ink: #68a7df;
  --info-soft: rgba(104, 167, 223, 0.16);
  --success: #48d19b;
  --success-ink: #48d19b;
  --success-soft: rgba(72, 209, 155, 0.14);
  --warning: #e6b768;
  --warning-ink: #e6b768;
  --warning-soft: rgba(230, 183, 104, 0.14);
  --danger: #f0928a;
  --danger-ink: #f0928a;
  --danger-soft: rgba(240, 146, 138, 0.14);

  --annotation: #c4271d;
  --on-annotation: #ffffff;

  --inverse-bg: #f1ecec;
  --inverse-fg: #1d1d1f;
  --inverse-accent: #0058b9;

  --scrim: rgba(0, 0, 0, 0.60);
  --glass: rgba(18, 13, 14, 0.66);
  --glass-line: rgba(255, 255, 255, 0.10);
  --grad: linear-gradient(135deg, #2c7fd0 0%, #3e97ec 100%);
  --grad-navy: radial-gradient(120% 260% at 12% -60%, #12315a 0%, #06111e 55%, #0b1b2c 100%);
  --grad-navy-hero: radial-gradient(90% 120% at 18% -20%, #12315a 0%, #06111e 58%, #0b1b2c 100%);

  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4), 0 12px 34px rgba(0, 0, 0, 0.42);
  --shadow-2: 0 2px 6px rgba(0, 0, 0, 0.5), 0 18px 44px rgba(0, 0, 0, 0.55);
  --shadow-3: 0 4px 12px rgba(0, 0, 0, 0.55), 0 30px 80px rgba(0, 0, 0, 0.6);
  --shadow-inset: inset 0 0 0 1px var(--line);
  --ring-accent: 0 0 0 4px var(--accent-glow);
}
/* @end */

/* ----------------------------------------------------------------------------
   Color: forced colors. System colors only; meaning is carried by text, icon
   shape, border and position, never by hue. Components add their own
   forced-colors rules for selected, checked and current states.
   ---------------------------------------------------------------------------- */
@media (forced-colors: active) {
/* @theme forced */
:root, :root:not([data-theme="light"]), :root[data-theme="dark"], [data-theme-scope] {
  color-scheme: light dark;

  --bg: Canvas;
  --canvas: Canvas;
  --surface: Canvas;
  --surface-2: Canvas;
  --surface-3: Canvas;
  --surface-raised: Canvas;
  --hair: CanvasText;
  --line: CanvasText;
  --line-strong: CanvasText;
  --control-border: ButtonText;

  --ink: CanvasText;
  --ink-2: CanvasText;
  --muted: CanvasText;

  --accent: Highlight;
  --accent-fill: ButtonFace;
  --accent-strong: LinkText;
  --accent-2: Highlight;
  --accent-soft: Canvas;
  --accent-glow: transparent;
  --on-accent: ButtonText;
  --link: LinkText;
  --link-hover: LinkText;
  --focus: Highlight;
  --focus-on-navy: Highlight;
  --selection: Highlight;
  --highlight: Canvas;

  --navy: Canvas;
  --navy-2: Canvas;
  --glow: Canvas;
  --on-navy: CanvasText;
  --on-navy-2: CanvasText;
  --navy-line: CanvasText;
  --navy-accent: LinkText;
  --navy-blue: LinkText;

  --info: CanvasText;
  --info-ink: CanvasText;
  --info-soft: Canvas;
  --success: CanvasText;
  --success-ink: CanvasText;
  --success-soft: Canvas;
  --warning: CanvasText;
  --warning-ink: CanvasText;
  --warning-soft: Canvas;
  --danger: CanvasText;
  --danger-ink: CanvasText;
  --danger-soft: Canvas;

  --annotation: CanvasText;
  --on-annotation: Canvas;

  --inverse-bg: Canvas;
  --inverse-fg: CanvasText;
  --inverse-accent: LinkText;

  --scrim: transparent;
  --glass: Canvas;
  --glass-line: CanvasText;
  --grad: none;
  --grad-navy: none;
  --grad-navy-hero: none;

  --shadow-1: none;
  --shadow-2: none;
  --shadow-3: none;
  --shadow-inset: none;
  --ring-accent: none;
}
/* @end */
}

/* ----------------------------------------------------------------------------
   Motion: reduced. Transforms and scroll-linking are removed; short opacity
   fades remain; the spring becomes a plain ease. Mirrors the OS preference and
   an explicit data-motion="reduce" (user setting, gallery switch).
   ---------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-instant: 0ms;
    --dur-fast: var(--dur-fade-reduced);
    --dur-base: var(--dur-fade-reduced);
    --dur-slow: var(--dur-fade-reduced);
    --dur-hero: var(--dur-fade-reduced);
    --dur-spring: var(--dur-fade-reduced);
    --ease-spring: var(--ease-out);
    --stagger: 0ms;
    --shift-sm: 0px;
    --shift-lg: 0px;
    --scale-press: 1;
    --scale-enter: 1;
  }
}
:root[data-motion="reduce"] {
  --dur-instant: 0ms;
  --dur-fast: var(--dur-fade-reduced);
  --dur-base: var(--dur-fade-reduced);
  --dur-slow: var(--dur-fade-reduced);
  --dur-hero: var(--dur-fade-reduced);
  --dur-spring: var(--dur-fade-reduced);
  --ease-spring: var(--ease-out);
  --stagger: 0ms;
  --shift-sm: 0px;
  --shift-lg: 0px;
  --scale-press: 1;
  --scale-enter: 1;
}