/* ==========================================================================
   MESSER design tokens — Precision with Warmth / Forged Datum v1.1
   Source of truth: brand/docs/visual-identity-guidelines/
                    messer-visual-identity-guidelines-v1.1.md (2026-08-16)
   Every MESSER surface imports THIS file. Do not restate hex values
   downstream — a copied token is the copy that goes stale.
   Dark-first: :root is the dark digital environment (§2 usage proportions);
   .theme-paper opts a region into the light Paper system (print, proposals,
   deliberate contrast moments — never the default below a hero).
   ========================================================================== */

/* ---- Faces (§4) -------------------------------------------------------- */

@font-face {
  font-family: "Instrument Sans";
  src: url("fonts/InstrumentSans-Variable.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-stretch: 75% 100%;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("fonts/IBMPlexMono-Medium.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}

:root {
  /* ---- Foundation neutrals (§2) --------------------------------------- */
  --void-1000: #090B0F;   /* deep display and hero field   */
  --ink-950:   #111820;   /* primary text, dark canvas, flat logo */
  --iron-850:  #242C35;   /* dark surfaces and navigation  */
  --steel-600: #5C6872;   /* secondary text on Paper       */
  --alloy-400: #B8BEC6;   /* dark-mode support, display metal */
  --chrome-200:#D8DCE1;   /* dark-mode text, restrained highlight */
  --paper-50:  #F3EFE7;   /* warm working canvas           */
  --white:     #FFFFFF;   /* high-contrast control text    */

  /* ---- Messer Red (§2) — the single brand signal ----------------------- */
  --red-100:          #F1D9DD; /* soft signal background        */
  --signal-500:       #C52437; /* brand signal, links, rules    */
  --red-600:          #AD1D30; /* primary controls              */
  --oxblood-700:      #861725; /* pressed controls, deep accents */
  --signal-highlight: #E14A55; /* red text on Ink, gradient high */

  /* ---- Functional UI states (§2 signal discipline) ---------------------
     UI states, not brand colors. Never carried by color alone. */
  --functional-success: #155B57;
  --functional-error:   #9B3434;

  /* ---- Gradients (§2) --------------------------------------------------
     Heat Field: atmosphere only — never required for contrast.
     Signal Sweep: large non-text graphics only; no body text across it.
     Alloy Finish: planar display highlight; never beveled chrome. */
  --heat-field:
    radial-gradient(circle at 78% 30%, rgba(197, 36, 55, .24), transparent 31rem),
    linear-gradient(142deg, #090B0F 0%, #150B10 58%, #090B0F 100%);
  --signal-sweep:
    linear-gradient(135deg, #861725 0%, #AD1D30 52%, #E14A55 100%);
  --alloy-finish:
    linear-gradient(180deg, #F5F6F7 0%, #AEB5BE 52%, #E6E8EB 100%);

  /* ---- Semantic aliases (§9), dark values — :root is dark-first -------- */
  --surface-canvas: var(--void-1000);
  --surface-raised: var(--iron-850);
  --text-primary:   var(--paper-50);
  --text-secondary: var(--alloy-400);
  --border-default: var(--alloy-400);
  --action-primary: var(--signal-500);
  --proof-primary:  var(--alloy-400);
  --focus-ring:     var(--signal-highlight);

  /* ---- Type (§4) ------------------------------------------------------- */
  --font-primary: "Instrument Sans", "Segoe UI", Arial, sans-serif;
  --font-mono:    "IBM Plex Mono", Consolas, monospace;

  --type-display: 700 clamp(52px, 7vw, 92px)/0.94 var(--font-primary);
  --type-h1:      680 clamp(38px, 4vw, 60px)/1.00 var(--font-primary);
  --type-h2:      650 34px/39px var(--font-primary);
  --type-h3:      600 24px/30px var(--font-primary);
  --type-body-lg: 450 18px/29px var(--font-primary);
  --type-body:    450 16px/26px var(--font-primary);
  --type-label:   600 13px/18px var(--font-primary);
  --type-meta:    500 12px/17px var(--font-mono);
  --measure-max:  68ch;
  --tracking-max: 0.08em;   /* uppercase = short metadata labels only */

  /* ---- Spacing (§8, 4px base) ------------------------------------------ */
  --space-1: 4px;  --space-2: 8px;   --space-3: 12px; --space-4: 16px;
  --space-6: 24px; --space-8: 32px;  --space-12: 48px;
  --space-16: 64px; --space-24: 96px;

  /* ---- Radius (§8) ----------------------------------------------------- */
  --radius-editorial: 2px;   /* logo, rails, editorial panels: 0–2px */
  --radius-control:   4px;   /* buttons and inputs                    */
  --radius-tile:      2px;   /* Signal Scatter tiles                  */
  --radius-modal:     8px;   /* modals and large media                */

  /* ---- Elevation (§8) — borders and fields over shadows ---------------- */
  --shadow-raised:  0 1px 2px rgba(17, 24, 32, .08);
  --shadow-overlay: 0 12px 32px rgba(17, 24, 32, .12);

  /* ---- Motion (§9) ----------------------------------------------------- */
  --motion-micro:    140ms;  /* 120–160ms  */
  --motion-standard: 210ms;  /* 180–240ms  */
  --motion-reveal:   360ms;  /* maximum    */
  --motion-ease:     cubic-bezier(.2, .7, .2, 1);
}

/* ---- Paper system (§9 light column) — deliberate regions only ---------- */
.theme-paper {
  --surface-canvas: var(--paper-50);
  --surface-raised: var(--white);
  --text-primary:   var(--ink-950);
  --text-secondary: var(--steel-600);
  --border-default: var(--steel-600);
  --action-primary: var(--red-600);
  --proof-primary:  var(--iron-850);
  --focus-ring:     var(--signal-500);
}

/* ---- Signal Scatter (§2) — six curated variants, never runtime-random --
   Two/three overlapping elliptical fields, strongest anchored at or past a
   tile edge, red opacity 10–22%, ≥70% of the reading zone stays near-black.
   Neighboring tiles never repeat a variant. Never behind body copy cores.  */
.scatter { background:
    radial-gradient(ellipse 58% 76% at var(--spot-a-x) var(--spot-a-y),
      rgba(197, 36, 55, .19) 0 9%, rgba(134, 23, 37, .13) 28%, transparent 64%),
    radial-gradient(ellipse 44% 62% at var(--spot-b-x) var(--spot-b-y),
      rgba(197, 36, 55, .15) 0 8%, rgba(134, 23, 37, .10) 30%, transparent 66%),
    linear-gradient(145deg, #0D0E12 0%, #090A0E 100%);
}
.scatter-a { --spot-a-x: -6%;  --spot-a-y: 30%;  --spot-b-x: 18%;  --spot-b-y: 82%; }
.scatter-b { --spot-a-x: 104%; --spot-a-y: 24%;  --spot-b-x: 78%;  --spot-b-y: 88%; }
.scatter-c { --spot-a-x: 38%;  --spot-a-y: -8%;  --spot-b-x: 84%;  --spot-b-y: 12%; }
.scatter-d { --spot-a-x: 62%;  --spot-a-y: 108%; --spot-b-x: 12%;  --spot-b-y: 90%; }
.scatter-e { --spot-a-x: -4%;  --spot-a-y: 78%;  --spot-b-x: 102%; --spot-b-y: 16%; }
.scatter-f { --spot-a-x: 106%; --spot-a-y: 64%;  --spot-b-x: -2%;  --spot-b-y: 8%;  }

/* ---- Focus (§3) --------------------------------------------------------- */
:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}