/* HaloFire platform design tokens — the single brand source of truth.
   Derived from the shipped drawing-surface vocabulary (--dr-*) and the Halo Fire
   Protection identity ("Serving, Protecting, Nationwide" — halofireus.com).
   Every surface loads this file; per-surface styles consume tokens, never raw hex. */

:root {
  /* Brand core */
  --hf-accent: #ff6a3d;        /* ember orange — primary action, brand mark */
  --hf-accent-deep: #d4381a;   /* flame red — hover/active, pipe red */
  --hf-accent-ink: #ffffff;
  --hf-pipe-red: #b3271e;      /* painted sprinkler-pipe steel */
  --hf-halo-gold: #ffb347;     /* halo ring highlight */

  /* Evidence status (shared meaning across every surface — never repurpose) */
  --hf-proven: #2f9e6f;
  --hf-assumed: #c08414;
  --hf-unresolved: #d24b3c;
  --hf-review: #d97706;

  /* Ink + surfaces (light) */
  --hf-ink: #1a2029;
  --hf-ink-soft: #4b5563;
  --hf-ink-faint: #8a93a3;
  --hf-bg: #f4f4f2;
  --hf-surface: #ffffff;
  --hf-glass: rgba(255, 255, 255, 0.82);
  --hf-glass-border: rgba(26, 32, 41, 0.10);
  --hf-shadow: 0 10px 30px rgba(20, 24, 32, 0.12);

  /* Typography — identical stack everywhere */
  --hf-font: ui-sans-serif, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --hf-mono: ui-monospace, "Cascadia Mono", Consolas, "DejaVu Sans Mono", monospace;
  --hf-text-xs: 0.75rem;
  --hf-text-sm: 0.875rem;
  --hf-text-md: 1rem;
  --hf-text-lg: 1.25rem;
  --hf-text-xl: 1.75rem;
  --hf-text-hero: clamp(2rem, 4vw, 3rem);

  /* Geometry */
  --hf-radius-panel: 16px;
  --hf-radius-control: 10px;
  --hf-radius-pill: 999px;
  --hf-gap: 12px;
  --hf-gap-lg: 20px;
}

:root[data-theme="dark"], .hf-dark {
  /* --hf-ink and --hf-shadow are held at the values /public/styles/tokens.css
     publishes for its dark default, so the two files state ONE palette rather
     than two. A surface that loads both (spine, drawing, stack viewer) and a
     surface that loads only this file (login) then resolve the same ink and the
     same panel shadow. Change them here and there together, never here alone. */
  --hf-ink: #f5f2ed;
  --hf-ink-soft: #b7bfcc;
  --hf-ink-faint: #7e8798;
  --hf-bg: #12151b;
  --hf-surface: #1a1f28;
  --hf-glass: rgba(22, 26, 34, 0.78);
  --hf-glass-border: rgba(238, 241, 245, 0.12);
  --hf-shadow: 0 24px 80px rgba(0, 0, 0, .35);
}

/* The evidence trio above carries no light-theme override, and that is
   deliberate: one meaning, one colour, both themes, every surface. Darkening it
   in light mode put the drawing surface's rail and the 3D stack's legend out of
   step with the model, which draws review geometry at a fixed colour either way.

   ---- Transitional aliases ----------------------------------------------
   The drawing surface (--dr-*) and the stack viewer (--sv-*) were built before
   this file existed and each declared its own copy of the same brand values.
   Both now alias onto these tokens at their own declaration site, so this block
   is the safety net: it keeps those names resolving on any surface that loads
   the brand file without its workspace stylesheet, and it is what a new surface
   inherits for free. Nothing here declares a value — only a pointer. */
:root {
  --dr-accent: var(--hf-accent);
  --dr-accent-deep: var(--hf-accent-deep);
  --dr-accent-ink: var(--hf-accent-ink);
  --dr-proven: var(--hf-proven);
  --dr-assumed: var(--hf-assumed);
  --dr-unresolved: var(--hf-unresolved);
  --dr-radius-panel: var(--hf-radius-panel);
  --dr-radius-control: var(--hf-radius-control);
  --dr-font: var(--hf-font);
  --dr-mono: var(--hf-mono);

  --sv-accent: var(--hf-accent);
  --sv-proven: var(--hf-proven);
  --sv-assumed: var(--hf-assumed);
  --sv-unresolved: var(--hf-unresolved);
  --sv-radius-panel: var(--hf-radius-panel);
  --sv-radius-control: var(--hf-radius-control);
  --sv-font: var(--hf-font);
  --sv-mono: var(--hf-mono);
}

/* ---- Shared primitives ------------------------------------------------- */

.hf-body {
  margin: 0;
  font-family: var(--hf-font);
  color: var(--hf-ink);
  background: var(--hf-bg);
  -webkit-font-smoothing: antialiased;
}

.hf-card {
  background: var(--hf-glass);
  border: 1px solid var(--hf-glass-border);
  border-radius: var(--hf-radius-panel);
  box-shadow: var(--hf-shadow);
  backdrop-filter: blur(14px);
}

.hf-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font: 600 var(--hf-text-md) var(--hf-font);
  color: var(--hf-accent-ink);
  background: linear-gradient(135deg, var(--hf-accent), var(--hf-accent-deep));
  border: none;
  border-radius: var(--hf-radius-control);
  padding: 12px 22px;
  cursor: pointer;
  transition: filter 120ms ease, transform 120ms ease;
}
.hf-btn-primary:hover { filter: brightness(1.06); }
.hf-btn-primary:active { transform: translateY(1px); }
/* Blocker rule: the primary action is never disabled — busy state keeps it live. */
.hf-btn-primary[aria-busy="true"] { filter: saturate(0.8); }

.hf-input {
  width: 100%;
  box-sizing: border-box;
  font: 400 var(--hf-text-md) var(--hf-font);
  color: var(--hf-ink);
  background: var(--hf-surface);
  border: 1px solid var(--hf-glass-border);
  border-radius: var(--hf-radius-control);
  padding: 12px 14px;
  outline: none;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.hf-input:focus {
  border-color: var(--hf-accent);
  box-shadow: 0 0 0 3px rgba(255, 106, 61, 0.22);
}

/* ---- Brand lockup ------------------------------------------------------
   The one HaloFire signature: halo mark from the sprite, the wordmark with its
   ember second syllable, and the PLATFORM badge. Every surface uses this exact
   markup so the mark never drifts:

     <div class="hf-brand">
       <svg class="hf-icon hf-brand-mark" aria-hidden="true">
         <use href="/public/brand/halofire-icons.svg#hf-mark"/></svg>
       <span class="hf-wordmark">Halo<em>Fire</em></span>
       <span class="hf-wordmark-badge">Platform</span>
     </div>

   The badge word is written in sentence case and uppercased by CSS. Shouting it
   in the markup would put a raw all-caps token in the DOM, which the source-model
   blocker rules forbid.                                                        */

.hf-brand { display: flex; align-items: center; gap: 10px; flex: none; }

.hf-brand-mark {
  width: 24px;
  height: 24px;
  flex: none;
  stroke: var(--hf-accent);
  stroke-width: 1.8;
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--hf-accent) 40%, transparent));
  vertical-align: middle;
}

.hf-wordmark {
  font: 800 var(--hf-text-lg) var(--hf-font);
  letter-spacing: -0.01em;
  color: var(--hf-ink);
  white-space: nowrap;
}
.hf-wordmark em { font-style: normal; color: var(--hf-accent); }
.hf-wordmark-badge {
  font: 600 var(--hf-text-xs) var(--hf-font);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hf-ink-soft);
  border: 1px solid color-mix(in srgb, var(--hf-ink) 22%, transparent);
  border-radius: var(--hf-radius-pill);
  padding: 3px 10px;
  white-space: nowrap;
  vertical-align: middle;
}

/* The sign-in panel wears the lockup at hero size. Same markup, same tokens. */
.hf-brand--lg { gap: 12px; }
.hf-brand--lg .hf-brand-mark {
  width: 34px;
  height: 34px;
  filter: drop-shadow(0 0 10px color-mix(in srgb, var(--hf-accent) 45%, transparent));
}
.hf-brand--lg .hf-wordmark { font-size: 1.5rem; }

/* ---- Platform header ---------------------------------------------------
   One header row for every signed-in surface: brand lockup, the same five
   destinations in the same order, then the surface's own chrome pushed right by
   .hf-spacer. The container's material (glass panel, full-bleed bar) stays with
   the surface; everything inside it is shared.                                */

.hf-topbar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 16px;
}

.hf-nav {
  display: flex;
  gap: 2px;
  margin-left: 8px;
  flex-wrap: wrap;
}
.hf-nav a {
  color: var(--hf-ink-soft);
  text-decoration: none;
  padding: 6px 11px;
  border-radius: var(--hf-radius-control);
  font: 500 var(--hf-text-sm) var(--hf-font);
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
}
.hf-nav a:hover { color: var(--hf-ink); background: color-mix(in srgb, var(--hf-ink) 10%, transparent); }
/* "You are here" is the same ember wash every pressed, selected and current
   control on the platform uses, so one signal means one thing on a nav link, a
   tool button, a story row and a sheet tab alike. A neutral grey wash was too
   close to plain hover to read as a state at all. */
.hf-nav a[aria-current=page] {
  color: var(--hf-ink);
  background: color-mix(in srgb, var(--hf-accent) 18%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--hf-accent) 50%, transparent);
}

.hf-spacer { flex: 1; }

/* Header chrome button: the theme toggle everywhere, plus the drawing surface's
   snap and grid toggles. Pressed state is the brand ember, never a grey. */
.hf-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 34px;
  min-width: 34px;
  padding: 0 10px;
  border-radius: var(--hf-radius-control);
  border: 1px solid color-mix(in srgb, var(--hf-ink) 14%, transparent);
  background: color-mix(in srgb, var(--hf-ink) 6%, transparent);
  color: var(--hf-ink);
  font: 500 var(--hf-text-sm) var(--hf-font);
  cursor: pointer;
}
.hf-icon-btn:hover { background: color-mix(in srgb, var(--hf-ink) 14%, transparent); }
.hf-icon-btn:active { transform: translateY(1px); }
.hf-icon-btn[aria-pressed=true] {
  background: color-mix(in srgb, var(--hf-accent) 18%, transparent);
  border-color: color-mix(in srgb, var(--hf-accent) 50%, transparent);
  color: var(--hf-ink);
}
.hf-icon-btn svg { flex: none; }

/* Narrow desktop: keep every destination reachable, tighten the padding rather
   than dropping links. (The drawing surface used to do this against .topbar.) */
@media (max-width: 1340px) {
  .hf-nav a { padding: 6px 9px; font-size: 12.5px; }
}

/* ---- Halo throbber ------------------------------------------------------
   The brand loading indicator: a halo ring with a flame-gradient arc sweeping
   around it. Use for every async wait across the platform — no ad-hoc spinners.
   <span class="hf-throbber" role="status" aria-label="Working"></span>          */

.hf-throbber {
  --size: 28px;
  width: var(--size);
  height: var(--size);
  display: inline-block;
  border-radius: 50%;
  background:
    conic-gradient(from 0deg, transparent 0 62%, var(--hf-halo-gold) 74%,
                   var(--hf-accent) 86%, var(--hf-accent-deep) 97%, transparent 100%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
  animation: hf-halo-spin 0.9s linear infinite;
}
.hf-throbber::after {                /* faint full halo underneath the arc */
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--hf-ink-faint) 28%, transparent);
}
.hf-throbber--sm { --size: 16px; }
.hf-throbber--lg { --size: 44px; }

/* Busy pairing. The throbber is a SIBLING of the control that is working and
   appears only while that control says it is busy, so the control itself stays
   live and clickable — a disabled or faded primary action is a blocker defect.
   Works off either flag, because two surfaces already publish two:
     <button aria-busy="true">…</button><span class="hf-throbber hf-busy-throbber">
     <button data-busy="true">…</button><span class="hf-throbber hf-busy-throbber"> */
.hf-busy-throbber { display: none; }
[aria-busy="true"] ~ .hf-busy-throbber,
[data-busy="true"] ~ .hf-busy-throbber { display: inline-block; }

@keyframes hf-halo-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .hf-throbber { animation-duration: 2.4s; }
}

/* ---- Icon defaults ------------------------------------------------------ */
.hf-icon {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -4px;
}