/* ══════════════════════════════════════════════════════════════════════════
   Sight — design tokens.
   Ported from the Sight design system (tokens/fonts, colors, typography,
   spacing, elevation, motion, base). Font URLs point at website/assets/fonts.

   Two scopes. Default is PAPER: marketing, forms, reports. [data-theme="ops"]
   is the dark console scope, used wherever thermal imagery is on screen.
   ══════════════════════════════════════════════════════════════════════════ */

/* Instrument Sans + JetBrains Mono load from a <link> in the document head,
   so the request starts against the preconnects instead of waiting on this file. */

@font-face{font-family:"Clash Display";src:url("../assets/fonts/ClashDisplay-Extralight.woff2") format("woff2");font-weight:200;font-style:normal;font-display:swap}
@font-face{font-family:"Clash Display";src:url("../assets/fonts/ClashDisplay-Light.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Clash Display";src:url("../assets/fonts/ClashDisplay-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Clash Display";src:url("../assets/fonts/ClashDisplay-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Clash Display";src:url("../assets/fonts/ClashDisplay-Semibold.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Clash Display";src:url("../assets/fonts/ClashDisplay-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}

/* ── Colour ───────────────────────────────────────────────────────────────
   Five brand values. Everything else is a tint, shade, or semantic alias. */

:root{
  /* Brand base */
  --plum-900:#221D23;   /* ink, near-black with a plum cast */
  --slate-400:#8B939C;  /* cool grey — telemetry, nominal, structure */
  --ember-500:#C44536;  /* signal orange-red — primary action, high severity */
  --sand-400:#DDB967;   /* gold — highlight, meters, marks */
  --crimson-700:#9B1D20;/* deep crimson — critical only */

  /* Brand tints & shades */
  --ember-600:#AE3B2E;
  --ember-700:#8F2E23;
  --ember-100:#F6DFDB;
  --ember-050:#FBEFEC;
  --sand-500:#C9A455;
  --sand-200:#F0E1BC;
  --sand-100:#F7EEDB;
  --crimson-800:#7C1618;
  --crimson-100:#F1D8D8;
  --slate-600:#5F676F;
  --slate-200:#C6CBD0;
  --slate-100:#E3E6E9;

  /* Paper neutrals */
  --paper:#F4F2ED;
  --paper-2:#EAE7E0;
  --paper-3:#DEDAD1;
  --white:#FFFFFF;
  --ink:#221D23;
  --ink-2:#453F47;
  --ink-3:#6E6873;
  --ink-4:#9A959E;

  /* Hairlines */
  --line:rgba(34,29,35,0.12);
  --line-2:rgba(34,29,35,0.22);
  --line-strong:rgba(34,29,35,0.55);

  /* Text */
  --text-strong:var(--ink);
  --text-body-color:var(--ink-2);
  --text-muted:var(--ink-3);
  --text-faint:var(--ink-4);
  --text-inverse:var(--paper);
  --text-accent:var(--ember-600);
  --text-link:var(--ember-600);
  --text-link-hover:var(--crimson-700);

  /* Surfaces */
  --surface-page:var(--paper);
  --surface-card:var(--white);
  --surface-sunken:var(--paper-2);
  --surface-raised:var(--white);
  --surface-inverse:var(--plum-900);
  --surface-accent:var(--ember-500);
  --surface-highlight:var(--sand-400);
  --surface-hover:rgba(34,29,35,0.04);
  --surface-active:rgba(34,29,35,0.08);

  /* Action */
  --action-primary-bg:var(--plum-900);
  --action-primary-fg:var(--paper);
  --action-primary-hover:#332C34;
  --action-accent-bg:var(--ember-500);
  --action-accent-fg:#FFF6F4;
  --action-accent-hover:var(--ember-600);
  --action-accent-press:var(--crimson-700);
  --action-quiet-fg:var(--ink-2);
  --action-disabled-bg:var(--paper-3);
  --action-disabled-fg:var(--ink-4);
  --focus-ring:var(--sand-400);
  --selection-bg:var(--sand-200);

  /* Severity (thermal). Four steps. "No anomaly" is deliberately colourless:
     it is drawn as a hairline, never a green pill, so colour always means a
     finding. There is no green anywhere in this system. */
  --sev-critical:var(--crimson-700);
  --sev-high:var(--ember-500);
  --sev-moderate:var(--sand-400);
  --sev-low:var(--slate-400);
  --sev-nominal:var(--ink-4);
  --sev-critical-tint:var(--crimson-100);
  --sev-high-tint:var(--ember-100);
  --sev-moderate-tint:var(--sand-100);
  --sev-low-tint:var(--slate-100);

  /* IEC conformance state */
  --state-blocked:var(--crimson-700);
  --state-deviation:var(--sand-500);
  --state-conforming:var(--slate-600);
  --state-measured:var(--slate-600);
  --state-estimated:var(--sand-500);
  --state-absent:var(--ink-4);

  /* Data viz ramp (ΔT, cold → hot) */
  --ramp-0:#8B939C;
  --ramp-1:#C6CBD0;
  --ramp-2:#F0E1BC;
  --ramp-3:#DDB967;
  --ramp-4:#C44536;
  --ramp-5:#9B1D20;
}

/* The paper scope, addressable. `:root` already carries these values, but the
   report document is a sheet of paper sitting inside the dark console, so the
   scope has to be nestable. This is also what [data-theme="light"] resolves
   to when an operator switches the console out of ops. */
[data-theme="paper"]{
  /* Paper neutrals */
  --paper:#F4F2ED;
  --paper-2:#EAE7E0;
  --paper-3:#DEDAD1;
  --white:#FFFFFF;
  --ink:#221D23;
  --ink-2:#453F47;
  --ink-3:#6E6873;
  --ink-4:#9A959E;

  /* Hairlines */
  --line:rgba(34,29,35,0.12);
  --line-2:rgba(34,29,35,0.22);
  --line-strong:rgba(34,29,35,0.55);

  /* Text */
  --text-strong:var(--ink);
  --text-body-color:var(--ink-2);
  --text-muted:var(--ink-3);
  --text-faint:var(--ink-4);
  --text-inverse:var(--paper);
  --text-accent:var(--ember-600);
  --text-link:var(--ember-600);
  --text-link-hover:var(--crimson-700);

  /* Surfaces */
  --surface-page:var(--paper);
  --surface-card:var(--white);
  --surface-sunken:var(--paper-2);
  --surface-raised:var(--white);
  --surface-inverse:var(--plum-900);
  --surface-accent:var(--ember-500);
  --surface-highlight:var(--sand-400);
  --surface-hover:rgba(34,29,35,0.04);
  --surface-active:rgba(34,29,35,0.08);

  /* Action */
  --action-primary-bg:var(--plum-900);
  --action-primary-fg:var(--paper);
  --action-primary-hover:#332C34;
  --action-accent-bg:var(--ember-500);
  --action-accent-fg:#FFF6F4;
  --action-accent-hover:var(--ember-600);
  --action-accent-press:var(--crimson-700);
  --action-quiet-fg:var(--ink-2);
  --action-disabled-bg:var(--paper-3);
  --action-disabled-fg:var(--ink-4);
  --focus-ring:var(--sand-400);
  --selection-bg:var(--sand-200);

  /* Severity (thermal). Four steps. "No anomaly" is deliberately colourless:
     it is drawn as a hairline, never a green pill, so colour always means a
     finding. There is no green anywhere in this system. */
  --sev-critical:var(--crimson-700);
  --sev-high:var(--ember-500);
  --sev-moderate:var(--sand-400);
  --sev-low:var(--slate-400);
  --sev-nominal:var(--ink-4);
  --sev-critical-tint:var(--crimson-100);
  --sev-high-tint:var(--ember-100);
  --sev-moderate-tint:var(--sand-100);
  --sev-low-tint:var(--slate-100);

  /* IEC conformance state */
  --state-blocked:var(--crimson-700);
  --state-deviation:var(--sand-500);
  --state-conforming:var(--slate-600);
  --state-measured:var(--slate-600);
  --state-estimated:var(--sand-500);
  --state-absent:var(--ink-4);

  /* Severity, conformance state and the ΔT ramp, restated so a paper surface
     nested in the ops scope does not inherit the dark severity values. */
  --sev-critical:var(--crimson-700);
  --sev-high:var(--ember-500);
  --sev-moderate:var(--sand-400);
  --sev-low:var(--slate-400);
  --sev-nominal:var(--ink-4);
  --sev-critical-tint:var(--crimson-100);
  --sev-high-tint:var(--ember-100);
  --sev-moderate-tint:var(--sand-100);
  --sev-low-tint:var(--slate-100);
  --shadow-card:0 1px 0 rgba(34,29,35,0.04);
  --shadow-raised:0 2px 4px rgba(34,29,35,0.06),0 1px 0 rgba(34,29,35,0.04);
  --shadow-pop:0 18px 40px rgba(34,29,35,0.16),0 0 0 1px rgba(34,29,35,0.06);
}

[data-theme="ops"]{
  --paper:#1A171C;
  --paper-2:#221D23;
  --paper-3:#2C262E;
  --white:#221D23;
  --ink:#F4F2ED;
  --ink-2:#CFC9CF;
  --ink-3:#8B939C;
  --ink-4:#5E5862;

  --line:rgba(244,242,237,0.10);
  --line-2:rgba(244,242,237,0.20);
  --line-strong:rgba(244,242,237,0.45);

  --surface-page:#1A171C;
  --surface-card:#221D23;
  --surface-sunken:#161318;
  --surface-raised:#2C262E;
  /* --paper is the page in this scope, so "inverse" and the primary action
     cannot reference it — they would come out dark on dark. Both take the
     light value literally. */
  --surface-inverse:#F4F2ED;
  --surface-hover:rgba(244,242,237,0.05);
  --surface-active:rgba(244,242,237,0.09);

  --action-primary-bg:#F4F2ED;
  --action-primary-fg:var(--plum-900);
  --action-primary-hover:#E2DED7;
  --action-quiet-fg:#CFC9CF;
  --action-disabled-bg:#2C262E;
  --action-disabled-fg:#5E5862;

  --text-strong:#F4F2ED;
  --text-body-color:#CFC9CF;
  --text-muted:#8B939C;
  --text-faint:#5E5862;
  --text-inverse:var(--plum-900);
  --text-accent:var(--sand-400);
  --text-link:var(--sand-400);
  --text-link-hover:var(--sand-200);
  --selection-bg:rgba(221,185,103,0.35);

  --sev-critical:#D4433F;
  --sev-high:#E0644F;
  --sev-moderate:var(--sand-400);
  --sev-low:var(--slate-400);
  --sev-critical-tint:rgba(212,67,63,0.16);
  --sev-high-tint:rgba(224,100,79,0.16);
  --sev-moderate-tint:rgba(221,185,103,0.16);
  --sev-low-tint:rgba(139,147,156,0.16);
}

/* ── Typography ───────────────────────────────────────────────────────────
   Clash Display carries every heading and every number that matters.
   Instrument Sans carries prose. JetBrains Mono carries telemetry. */

:root{
  --font-display:"Clash Display","Helvetica Neue",sans-serif;
  --font-body:"Instrument Sans",-apple-system,"Segoe UI",sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,monospace;

  --fw-display-thin:200;
  --fw-display-light:300;
  --fw-display:400;
  --fw-display-medium:500;
  --fw-display-semi:600;
  --fw-display-bold:700;
  --fw-body:400;
  --fw-body-medium:500;
  --fw-body-semi:600;

  /* Display scale — Clash Display, tight tracking, near-1 leading */
  --text-hero:clamp(3.5rem,7.4vw,7.5rem);
  --text-display-1:4rem;
  --text-display-2:3rem;
  --text-title-1:2.25rem;
  --text-title-2:1.75rem;
  --text-title-3:1.375rem;

  /* Body scale — Instrument Sans */
  --text-lead:1.125rem;
  --text-body:0.9375rem;
  --text-body-sm:0.8125rem;
  --text-caption:0.75rem;

  /* Mono scale — JetBrains Mono */
  --text-mono:0.75rem;
  --text-mono-sm:0.6875rem;
  --text-mono-xs:0.625rem;
  --text-clause:0.5625rem;

  --lh-hero:0.92;
  --lh-display:0.98;
  --lh-title:1.08;
  --lh-body:1.55;
  --lh-mono:1.5;

  --tracking-hero:-0.03em;
  --tracking-display:-0.022em;
  --tracking-title:-0.014em;
  --tracking-body:0;
  --tracking-eyebrow:0.18em;
  --tracking-mono:0.04em;
  --tracking-label:0.12em;
}

/* ── Spacing, radii, layout ───────────────────────────────────────────────
   Base unit is 4px. Console runs a 56px row and a 28px gutter; marketing
   uses the wide gutter. */

:root{
  --space-0:0;
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:20px;
  --space-6:24px;
  --space-7:28px;
  --space-8:32px;
  --space-10:40px;
  --space-12:48px;
  --space-16:64px;
  --space-20:80px;
  --space-24:96px;
  --space-32:128px;

  /* Radii — small and deliberate. Only pills are lozenges. */
  --radius-xs:2px;
  --radius-sm:4px;
  --radius-md:6px;
  --radius-lg:10px;
  --radius-xl:16px;
  --radius-pill:999px;

  --border-hair:1px;
  --border-weight:2px;

  --gutter:28px;
  --gutter-wide:56px;
  --row:56px;
  --row-compact:44px;
  --measure:64ch;
  --content-max:1480px;
  --field-grid:56px;   /* background survey-grid pitch */

  --control-h-sm:32px;
  --control-h:40px;
  --control-h-lg:48px;
  --control-pad-x:18px;
  --tap-min:44px;
}

[data-density="compact"]{--row:44px;--space-6:16px;--space-7:20px;--control-h:36px}

/* ── Elevation, blur, texture ─────────────────────────────────────────────
   Hairlines, not shadows. Shadow is reserved for things that genuinely float
   over imagery: popovers, the order summary, modals. */

:root{
  --shadow-none:none;
  --shadow-card:0 1px 0 rgba(34,29,35,0.04);
  --shadow-raised:0 2px 4px rgba(34,29,35,0.06),0 1px 0 rgba(34,29,35,0.04);
  --shadow-pop:0 18px 40px rgba(34,29,35,0.16),0 0 0 1px rgba(34,29,35,0.06);
  --shadow-modal:0 40px 90px rgba(34,29,35,0.28),0 0 0 1px rgba(34,29,35,0.08);
  --shadow-inset-hair:inset 0 0 0 1px var(--line);

  --blur-chrome:blur(18px) saturate(1.15);
  --blur-overlay:blur(24px);

  --scrim-image:linear-gradient(to top,rgba(34,29,35,0.82),rgba(34,29,35,0.15) 55%,transparent);
  --scrim-modal:rgba(34,29,35,0.55);

  /* Survey grid — the one repeating texture in the brand */
  --texture-grid:linear-gradient(to right,var(--line) 1px,transparent 1px),linear-gradient(to bottom,var(--line) 1px,transparent 1px);
  --texture-grid-size:var(--field-grid) var(--field-grid);
}

[data-theme="ops"]{
  --shadow-card:none;
  --shadow-raised:0 1px 0 rgba(0,0,0,0.4);
  --shadow-pop:0 24px 48px rgba(0,0,0,0.55),0 0 0 1px rgba(244,242,237,0.08);
  --shadow-modal:0 40px 90px rgba(0,0,0,0.7),0 0 0 1px rgba(244,242,237,0.10);
  --scrim-image:linear-gradient(to top,rgba(10,9,11,0.9),rgba(10,9,11,0.2) 55%,transparent);
}

/* ── Motion ───────────────────────────────────────────────────────────────
   Instrument-panel motion: short, eased-out, no bounce, no spring. Things
   arrive by fading and moving a few pixels. Only the session dot loops. */

:root{
  --ease-out:cubic-bezier(0.22,0.61,0.36,1);
  --ease-in-out:cubic-bezier(0.4,0,0.2,1);
  --ease-scrub:linear;

  --dur-instant:80ms;
  --dur-fast:140ms;
  --dur-base:220ms;
  --dur-slow:380ms;
  --dur-reveal:560ms;

  --move-nudge:4px;
  --move-rise:12px;

  --transition-control:background var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out);
  --transition-surface:opacity var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out);
}

@keyframes sight-pulse{0%,100%{opacity:1}50%{opacity:0.4}}
@keyframes sight-rise{from{opacity:0;transform:translateY(var(--move-rise))}to{opacity:1;transform:none}}
@keyframes sight-sweep{from{transform:translateX(-100%)}to{transform:translateX(100%)}}

@media (prefers-reduced-motion:reduce){
  :root{--dur-fast:0ms;--dur-base:0ms;--dur-slow:0ms;--dur-reveal:0ms}
  *,*::before,*::after{animation-duration:0.001ms!important;animation-iteration-count:1!important}
}

/* ── Base elements ────────────────────────────────────────────────────────
   Kept minimal: components carry their own styling. */

*,*::before,*::after{box-sizing:border-box}
body{
  margin:0;
  background:var(--surface-page);
  color:var(--text-body-color);
  font-family:var(--font-body);
  font-size:var(--text-body);
  line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,h4,h5{margin:0;font-family:var(--font-display);font-weight:var(--fw-display);color:var(--text-strong);letter-spacing:var(--tracking-title);line-height:var(--lh-title)}
p{margin:0;text-wrap:pretty}
img,svg,canvas{display:block;max-width:100%}
button{font-family:inherit;cursor:pointer}
a{color:var(--text-link);text-decoration:none;text-underline-offset:3px}
a:hover{color:var(--text-link-hover);text-decoration:underline}
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
::selection{background:var(--selection-bg);color:var(--ink)}
hr{border:none;border-top:1px solid var(--line);margin:var(--space-8) 0}
table{border-collapse:collapse}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:var(--radius-pill);border:3px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:var(--ink-4);background-clip:content-box}

/* ── Type utilities ───────────────────────────────────────────────────── */

.sight-hero{font-family:var(--font-display);font-weight:var(--fw-display-light);font-size:var(--text-hero);line-height:var(--lh-hero);letter-spacing:var(--tracking-hero);color:var(--text-strong)}
.sight-display{font-family:var(--font-display);font-weight:var(--fw-display);font-size:var(--text-display-2);line-height:var(--lh-display);letter-spacing:var(--tracking-display);color:var(--text-strong)}
.sight-title{font-family:var(--font-display);font-weight:var(--fw-display-medium);font-size:var(--text-title-2);line-height:var(--lh-title);letter-spacing:var(--tracking-title);color:var(--text-strong)}
.sight-lead{font-family:var(--font-body);font-size:var(--text-lead);line-height:1.5;color:var(--text-body-color);text-wrap:pretty}
.sight-body{font-family:var(--font-body);font-size:var(--text-body);line-height:var(--lh-body);color:var(--text-body-color);text-wrap:pretty}
.sight-eyebrow{font-family:var(--font-mono);font-weight:500;font-size:var(--text-mono-sm);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--text-muted)}
.sight-mono{font-family:var(--font-mono);font-size:var(--text-mono);letter-spacing:var(--tracking-mono);color:var(--text-muted)}
.sight-num{font-family:var(--font-mono);font-variant-numeric:tabular-nums;letter-spacing:0;color:var(--text-strong)}
.sight-clause{font-family:var(--font-mono);font-size:var(--text-clause);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-faint)}