/* ═══════════════════════════════════════════════════════════════════════════
   FORGEOS FENESTRATION — brand tokens for the APP CHROME.
   // FORGEOS FENESTRATION · TOKENS · v01   (from the supplied tokens.css)

   THIS FILE MUST STAY ABOVE css/responsive.css IN <head>, and its ?v= must be
   bumped on every edit — css/ is not covered by the per-module content-hash
   manifest (scripts/generate-module-manifest.cjs walks modules/ only), so an
   unversioned edit can be served stale. Both rules are CLAUDE.md's, §5 of the
   responsive contract.

   ─── WHAT IS DELIBERATELY NOT HERE ───────────────────────────────────────
   The supplied tokens.css styles `body` (background, colour, Inter, tnum) and
   `h1,h2,h3`. Those are omitted ON PURPOSE. CAD's layout is ~10,000 inline
   `style={{…}}` objects and almost none of them declare a font, so a body-level
   family or `tnum` re-metricises every unstyled run of text in the app at once
   — on the one product whose headers already wrap to four lines at 344px.
   CLAUDE.md's rule for that is explicit: change a layout in the RENDERER that
   owns it. So the ForgeOS type is applied by the chrome components in
   modules/_lib/forgeos-brand.js, which know what they are sizing, and what
   lives here is only what JSX cannot express: custom properties, keyframes and
   the pattern backdrop.

   ─── AND WHAT IS NOT BRANDED AT ALL ──────────────────────────────────────
   Documents. The quotation, the check measure, the Final Design, the service
   sheets, Client Mode and the customer's Final Sign Off are Spartan Double
   Glazing's, and they render inside their own iframes/PDFs with their own
   styles — nothing here reaches them. See the header of
   modules/_lib/forgeos-brand.js, and test/forgeos-brand-split.mjs, which
   fails the deploy if that stops being true.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* brand */
  --fos-yellow: #facc15;
  --fos-yellow-bright: #fde047;
  --fos-yellow-dim: #a16207;

  /* surfaces */
  --fos-near-black: #0a0a0a;
  --fos-ink: #000000;
  --fos-card: #0f0f0f;
  --fos-muted: #171717;
  --fos-border: #262626;
  --fos-divider: rgba(255, 255, 255, 0.08);

  /* text */
  --fos-fg: #fafafa;
  --fos-n300: #d4d4d4;
  --fos-n400: #a3a3a3;
  --fos-n500: #737373;
  --fos-n600: #525252;

  /* state — never the only carrier of a state (BRAND.md §9) */
  --fos-ok: #34d399;
  --fos-warn: #fbbf24;
  --fos-fail: #ef4444;
  --fos-fail-soft: #fb7185;
  --fos-info: #38bdf8;
  --fos-hot: #fb923c;

  /* type */
  --font-display: 'Archivo Black', 'Inter', system-ui, sans-serif;
  --font-sans: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', ui-monospace, monospace;

  --radius: 6px;
}

/* ── the mono-cap label: the brand signature ─────────────────────────────
   For the surfaces that are plain HTML and paint before any module has been
   fetched — the PIN gate and the boot splash in index.html. React surfaces
   use FosLabel from modules/_lib/forgeos-brand.js instead, so there is one
   definition per language and neither is a copy of the other's numbers. */
.fos-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fos-n500);
}
.fos-label::before { content: '// '; color: var(--fos-yellow); }
.fos-label--plain::before { content: none; }

/* ── grid backdrop — BRAND.md §5: a 56px grid at 3% white on heroes and
   empty states. "It's a tactical-screen reference, keep it barely visible." */
.fos-grid-backdrop {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 56px 56px;
}

/* ── hairline accent rule under a heading — §5: 2px tall, 60–120px wide ── */
.fos-rule { height: 2px; width: 80px; background: var(--fos-yellow); border: 0; }

/* ── the yellow live-status pulse. §5 allows a fade and this, nothing else.
   A keyframe is one of the few things a JSX inline style genuinely cannot
   declare, which is why it lives in a stylesheet at all. */
@keyframes fos-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.fos-dot {
  display: inline-block; width: 6px; height: 6px;
  border-radius: 50%; background: var(--fos-n600);
}
.fos-dot--live { background: var(--fos-yellow); animation: fos-pulse 1.6s ease-in-out infinite; }
.fos-dot--pending { background: rgba(251, 191, 36, 0.7); }
.fos-dot--ok { background: var(--fos-ok); }
.fos-dot--fail { background: var(--fos-fail); }

@media (prefers-reduced-motion: reduce) {
  .fos-dot--live { animation: none; }
}