/* ============================================================================
   rar-tokens.css — the RaR brand floor on top of scrollcraft.css
   ----------------------------------------------------------------------------
   Load AFTER engine/scrollcraft.css. This file overrides only the ~12 token
   values scrollcraft designates as the brand layer, plus a small set of
   layout primitives every template needs (chrome, forms, plates). It defines
   NO card / badge / pill component, deliberately — scrollcraft.css's own
   header explains why: a stylesheet that ships components is how every page
   built on it ends up the same shape. Composition lives in each template.

   FONTS — ZERO GOOGLE (/rar-refresh HARD RULE 1). Every stack below is either
   a system face or a generic. No `fonts.googleapis.com`, no `fonts.gstatic.com`,
   no webfont service of any kind. When a template is PORTED to a live site,
   self-host the chosen faces as woff2 under the site's own assets/ — do not
   swap a system stack for a Google-hosted one at port time.

   PHONE — no template, and no token here, may introduce a `tel:` link, a
   `"telephone"` property, or a formatted number. The demo dataset has none
   and the gate fails the build on one. (HARD RULE 2.)

   Each template sets its palette + type pairing via a body class `t01`..`t20`.
   Palette and type vary per template so a preview reads like a real site would;
   structural difference is enforced separately by the fingerprint gate, so a
   recolor can never pass as a new template.
   ========================================================================== */

/* ------------------------------------------------------- type pairings -- */
/* Two families max per template — display carries voice, text carries prose. */
:root {
  --rf-grotesk:   ui-sans-serif, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --rf-humanist:  "Avenir Next", "Segoe UI", "Optima", ui-sans-serif, sans-serif;
  --rf-geometric: "Futura", "Century Gothic", "Avenir Next", ui-sans-serif, sans-serif;
  --rf-transitional: "Charter", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --rf-oldstyle:  "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --rf-scotch:    Georgia, "Times New Roman", "Liberation Serif", serif;
  --rf-slab:      "Rockwell", "Roboto Slab", Georgia, serif;
  --rf-mono:      ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --rf-condensed: "Oswald", "Haettenschweiler", "Arial Narrow", ui-sans-serif, sans-serif;
}

/* ------------------------------------------------------------ palettes -- */
/* Six colour roles per template. One accent each: it owns a region, never
   confetti. Grounds alternate light/dark across the set on purpose — a table
   of twenty dark pages is one page shown twenty times. */

/* The four light templates were originally #f6f4ef / #faf7f2 / #f5f3ee /
   #f3f1ea — four warm off-whites within 7 points of each other on every
   channel, i.e. the same cream four times. In a set whose whole product is
   "these look different", that is a defect, and it is the specific reflex the
   impeccable `cream-palette` rule names. Each light ground is now committed to
   its own material: warm manila for the field report, stark white for the
   poster, cool blueprint for the estimate sheet, grey newsprint for the
   broadsheet. Newsprint is grey, not cream. */
body.t01 { --sc-canvas:#efe7d8; --sc-surface:#f9f4e9; --sc-ink:#161412; --sc-ink-soft:#5f5a52; --sc-accent:#8a2b1f; --sc-accent-ink:#f9f4e9;
           --sc-font-display:var(--rf-transitional); --sc-font-text:var(--rf-transitional); --sc-font-mono:var(--rf-mono); }
body.t02 { --sc-canvas:#14181e; --sc-surface:#1c222a; --sc-ink:#eef1f4; --sc-ink-soft:#98a1ab; --sc-accent:#d9a441; --sc-accent-ink:#101418;
           --sc-font-display:var(--rf-scotch); --sc-font-text:var(--rf-humanist); --sc-font-mono:var(--rf-mono); }
/* t03's ink-soft darkened from #5b6b7c when this canvas moved off pure white:
   #5b6b7c measured 4.32:1 on #dfe6e3, under the 4.5:1 AA floor. #51606f is
   5.09:1. Every secondary-text token in this file is paired to its OWN canvas
   — a palette is a pair, and moving a ground without re-checking its ink is
   how a recolour silently ships unreadable text. */
body.t03 { --sc-canvas:#dfe6e3; --sc-surface:#f5f8f7; --sc-ink:#0d1b2a; --sc-ink-soft:#51606f; --sc-accent:#0f6f8c; --sc-accent-ink:#ffffff;
           --sc-font-display:var(--rf-grotesk); --sc-font-text:var(--rf-grotesk); --sc-font-mono:var(--rf-mono); }
body.t04 { --sc-canvas:#1a1512; --sc-surface:#241d18; --sc-ink:#f2ede6; --sc-ink-soft:#a3988a; --sc-accent:#c96f2c; --sc-accent-ink:#12100e;
           --sc-font-display:var(--rf-condensed); --sc-font-text:var(--rf-humanist); --sc-font-mono:var(--rf-mono); }
body.t05 { --sc-canvas:#f4f6f4; --sc-surface:#ffffff; --sc-ink:#12211a; --sc-ink-soft:#5a6b62; --sc-accent:#1f6b45; --sc-accent-ink:#ffffff;
           --sc-font-display:var(--rf-humanist); --sc-font-text:var(--rf-humanist); --sc-font-mono:var(--rf-mono); }
body.t06 { --sc-canvas:#080b14; --sc-surface:#121722; --sc-ink:#eaeef6; --sc-ink-soft:#8d97a8; --sc-accent:#5fb0ff; --sc-accent-ink:#0b0d12;
           --sc-font-display:var(--rf-grotesk); --sc-font-text:var(--rf-grotesk); --sc-font-mono:var(--rf-mono); }
body.t07 { --sc-canvas:#ffffff; --sc-surface:#f0eeea; --sc-ink:#140e04; --sc-ink-soft:#6a5c46; --sc-accent:#a8410f; --sc-accent-ink:#ffffff;
           --sc-font-display:var(--rf-geometric); --sc-font-text:var(--rf-humanist); --sc-font-mono:var(--rf-mono); }
body.t08 { --sc-canvas:#1b1b19; --sc-surface:#252523; --sc-ink:#f5f5f3; --sc-ink-soft:#9d9d97; --sc-accent:#e4ff4f; --sc-accent-ink:#161616;
           --sc-font-display:var(--rf-grotesk); --sc-font-text:var(--rf-mono); --sc-font-mono:var(--rf-mono); }
body.t09 { --sc-canvas:#fbfbfc; --sc-surface:#eef0f4; --sc-ink:#111318; --sc-ink-soft:#5c616c; --sc-accent:#b3123a; --sc-accent-ink:#ffffff;
           --sc-font-display:var(--rf-condensed); --sc-font-text:var(--rf-grotesk); --sc-font-mono:var(--rf-mono); }
body.t10 { --sc-canvas:#0d1410; --sc-surface:#17211b; --sc-ink:#e9f1ec; --sc-ink-soft:#8fa398; --sc-accent:#7fd48f; --sc-accent-ink:#0f1512;
           --sc-font-display:var(--rf-mono); --sc-font-text:var(--rf-humanist); --sc-font-mono:var(--rf-mono); }
body.t11 { --sc-canvas:#f7f8fa; --sc-surface:#ffffff; --sc-ink:#0e1420; --sc-ink-soft:#59637a; --sc-accent:#3b3fd8; --sc-accent-ink:#ffffff;
           --sc-font-display:var(--rf-grotesk); --sc-font-text:var(--rf-grotesk); --sc-font-mono:var(--rf-mono); }
body.t12 { --sc-canvas:#071013; --sc-surface:#101c21; --sc-ink:#e7f0f3; --sc-ink-soft:#8b9ba3; --sc-accent:#2fd4c4; --sc-accent-ink:#0c1114;
           --sc-font-display:var(--rf-mono); --sc-font-text:var(--rf-grotesk); --sc-font-mono:var(--rf-mono); }
body.t13 { --sc-canvas:#17120b; --sc-surface:#221b12; --sc-ink:#f1ece5; --sc-ink-soft:#a2968a; --sc-accent:#d8b45f; --sc-accent-ink:#100e0c;
           --sc-font-display:var(--rf-oldstyle); --sc-font-text:var(--rf-humanist); --sc-font-mono:var(--rf-mono); }
body.t14 { --sc-canvas:#101a17; --sc-surface:#1a2622; --sc-ink:#e8f0ec; --sc-ink-soft:#8ba096; --sc-accent:#e0663f; --sc-accent-ink:#0a0f0d;
           --sc-font-display:var(--rf-geometric); --sc-font-text:var(--rf-grotesk); --sc-font-mono:var(--rf-mono); }
body.t15 { --sc-canvas:#050507; --sc-surface:#101218; --sc-ink:#f4f2ef; --sc-ink-soft:#969aa3; --sc-accent:#ff5c39; --sc-accent-ink:#08090b;
           --sc-font-display:var(--rf-grotesk); --sc-font-text:var(--rf-grotesk); --sc-font-mono:var(--rf-mono); }
body.t16 { --sc-canvas:#e4e9f0; --sc-surface:#f7f9fc; --sc-ink:#14181f; --sc-ink-soft:#586274; --sc-accent:#2f4f8a; --sc-accent-ink:#f7f9fc;
           --sc-font-display:var(--rf-slab); --sc-font-text:var(--rf-transitional); --sc-font-mono:var(--rf-mono); }
body.t17 { --sc-canvas:#e7e7e4; --sc-surface:#f3f3f1; --sc-ink:#121213; --sc-ink-soft:#56565a; --sc-accent:#1c1b17; --sc-accent-ink:#f3f3f1;
           --sc-font-display:var(--rf-scotch); --sc-font-text:var(--rf-scotch); --sc-font-mono:var(--rf-mono); }
body.t18 { --sc-canvas:#f0ecf9; --sc-surface:#ffffff; --sc-ink:#15181d; --sc-ink-soft:#606772; --sc-accent:#6a3fd8; --sc-accent-ink:#ffffff;
           --sc-font-display:var(--rf-humanist); --sc-font-text:var(--rf-grotesk); --sc-font-mono:var(--rf-mono); }
body.t19 { --sc-canvas:#221c12; --sc-surface:#2f2719; --sc-ink:#f6f3ee; --sc-ink-soft:#a2988a; --sc-accent:#ffb302; --sc-accent-ink:#141210;
           --sc-font-display:var(--rf-condensed); --sc-font-text:var(--rf-grotesk); --sc-font-mono:var(--rf-mono); }
body.t20 { --sc-canvas:#f5eef1; --sc-surface:#ffffff; --sc-ink:#16150f; --sc-ink-soft:#605c50; --sc-accent:#7a1f4f; --sc-accent-ink:#ffffff;
           --sc-font-display:var(--rf-geometric); --sc-font-text:var(--rf-transitional); --sc-font-mono:var(--rf-mono); }

/* ------------------------------------------------- no-JS visibility guard */
/* scrollcraft.css sets `[data-sc-cue] { opacity: 0 }` and hides `[data-sc-in]`
   the same way. The engine reopens them. With JS off, or if the engine fails
   to mount, every cued element stays at opacity 0 — the page is in the DOM,
   scores fine on any text-length check, and renders BLANK to a reader and to
   a printer. That exact failure is on record
   (`memory/scroll-reveal-ships-blank-without-js`): the tell is that the built
   HTML looks complete, so only a computed-opacity check catches it.

   Every template's <head> carries, before any stylesheet:
       <script>document.documentElement.classList.add('sc-js')</script>
   It is inline and synchronous, so it runs before first paint and there is no
   flash of unhidden content. No JS, or a parse error, means no class, and the
   rules below hand the page back at full opacity.

   Do not "simplify" this by deleting the guard and trusting the engine. The
   engine is the thing that might not run. */
html:not(.sc-js) :is([data-sc-cue], [data-sc-in], [data-sc-copy]),
html:not(.sc-js) [data-sc-stagger] > * {
  opacity: 1 !important;
  transform: none !important;
}
html:not(.sc-js) [data-sc-reveal] { clip-path: none !important; }
html:not(.sc-js) .sc-stage { position: static !important; height: auto !important; }
html:not(.sc-js) .sc-stage__poster { position: relative !important; opacity: 1 !important; }
html:not(.sc-js) [data-sc-pan] { flex-wrap: wrap; }

/* Same hand-back if the engine mounted but the browser refuses motion. The
   engine already fades cues under reduced motion rather than skipping them,
   so this only covers the pan rail, which has nothing to translate it. */
@media (prefers-reduced-motion: reduce) {
  [data-sc-pan] { flex-wrap: wrap; }
}

/* ------------------------------------------------------------- primitives */
/* Deliberately unopinionated: a link, a form, a plate, a rule. Anything that
   would give twenty pages the same silhouette stays out of this file. */

.rf-link { color: inherit; text-decoration: none; }
.rf-underline { text-decoration: underline; text-underline-offset: 0.22em; text-decoration-thickness: 1px; }

.rf-cta {
  display: inline-flex; align-items: center; gap: var(--sc-2);
  background: var(--sc-accent); color: var(--sc-accent-ink);
  font-family: var(--sc-font-display); font-size: var(--sc-t-sm);
  letter-spacing: var(--sc-track-wide); text-transform: uppercase;
  padding: 0.95em 1.6em; text-decoration: none; border: 0; cursor: pointer;
}
.rf-cta--ghost { background: transparent; color: var(--sc-ink); box-shadow: inset 0 0 0 1px var(--sc-hairline-strong); }
.rf-cta:focus-visible, .rf-link:focus-visible, .rf-field:focus-visible {
  outline: 2px solid var(--sc-accent); outline-offset: 3px;
}

.rf-plate { position: relative; overflow: hidden; background: var(--sc-surface); }
.rf-plate img { display: block; width: 100%; height: 100%; object-fit: cover; }
.rf-cap {
  font-family: var(--sc-font-mono); font-size: var(--sc-t-xs);
  color: var(--sc-ink-soft); letter-spacing: var(--sc-track-wide);
  text-transform: uppercase;
}

.rf-form { display: grid; gap: var(--sc-4); }
.rf-field {
  width: 100%; font: inherit; font-size: var(--sc-t-base);
  color: var(--sc-ink); background: var(--sc-surface);
  border: 0; box-shadow: inset 0 0 0 1px var(--sc-hairline-strong);
  padding: 0.85em 1em;
}
.rf-field::placeholder { color: var(--sc-ink-soft); }
.rf-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.rf-skip {
  position: absolute; left: -9999px;
  background: var(--sc-accent); color: var(--sc-accent-ink); padding: var(--sc-3) var(--sc-4);
}
.rf-skip:focus { left: var(--sc-4); top: var(--sc-4); z-index: 999; }

/* Utility only where a template would otherwise repeat the same three lines. */
.rf-grid { display: grid; gap: var(--sc-5); }
.rf-flow > * + * { margin-top: var(--sc-4); }
.rf-measure { max-width: var(--sc-measure); }
.rf-tabular { font-variant-numeric: tabular-nums; }