/**
 * Tappmedia NYC — shared design tokens
 *
 * GATE 1 OF THE 2.0 IMPLEMENTATION. STANDALONE. NOT YET REFERENCED.
 *
 * No existing page links to this file yet. Every value below was extracted
 * from the current, live `:root` blocks and component rules in index.html
 * and the privacy.html/terms.html/accessibility.html/about-tappmedia-nyc.html
 * legal-page template — nothing here is invented. Where the two templates
 * disagreed, the discrepancy is called out explicitly rather than silently
 * resolved (see FOCUS RING below).
 *
 * WHAT THIS FILE DOES NOT DO
 * It does not change how any current page renders. Wiring pages to this
 * file, and retiring their duplicated :root blocks, is a later, separate,
 * explicitly authorized step — see the Gate 1 report for exactly which
 * declarations are safe to migrate and which must stay page-specific.
 */

/* ===========================================================================
   COLOR
   Source: index.html :root (homepage) and the shared legal-page :root
   (privacy.html / terms.html / accessibility.html / about-tappmedia-nyc.html).
   Both templates agree on every value below except --focus.
   =========================================================================== */
:root {
  --ink: #EFE7D8;                       /* page ground: warm cream */
  --ink-soft: #F7F2E9;                  /* elevated surface: warm white */
  --ivory: #14213E;                     /* primary text: deep navy */
  --ivory-dim: #545C6B;                 /* muted text: slate, AA on cream */
  --gold: #B4863A;                      /* accent: fills, borders, large display */
  --gold-ink: #7C5A16;                  /* small gold text, AA on cream */
  --gold-soft: #7C5A16;                 /* carried forward as-is from index.html's
                                            :root, which defines this identically
                                            to --gold-ink; not corrected here, since
                                            that would be a judgment call on intent
                                            beyond Gate 1's scope */
  --rule: rgba(20, 33, 62, 0.14);       /* navy hairline on cream */
  --rule-strong: rgba(20, 33, 62, 0.28);
  --mark: #9B3A2C;                      /* audit-mark accent: struck/flagged (hero signature only) */
  --mark-soft: rgba(155, 58, 44, 0.14);

  /* FOCUS RING — UNIFIED, NOT AVERAGED
     index.html used #8A6410. The legal-page template used #E8B84F. These are
     not a stylistic choice between two acceptable options: measured against
     the --ink cream background using the WCAG relative-luminance formula,
     #8A6410 yields a contrast ratio of ~4.37:1 (passes the 3:1 non-text
     minimum for focus indicators, WCAG 1.4.11, comfortably). #E8B84F yields
     ~1.5:1 — a real, currently-live failure on privacy.html, terms.html,
     accessibility.html, and about-tappmedia-nyc.html today. #8A6410 is also
     the value already confirmed, in an earlier live-keyboard test this
     session, to render as a solid, correctly-offset outline in practice, not
     just in theory. That is why this file standardizes on it. */
  --focus: #8A6410;
}

/* ===========================================================================
   TYPOGRAPHY
   Source: identical --display/--body declarations in both templates.
   --mono exists only in index.html's :root; the legal-page template never
   declared it because it never used JetBrains Mono. Carried forward here so
   any future page has access to it without re-declaring the stack.
   =========================================================================== */
:root {
  --display: 'Fraunces', 'Times New Roman', serif;
  --body: 'Manrope', system-ui, -apple-system, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace;
}

/**
 * USAGE RULES (not enforced by CSS alone — a note for whoever builds the
 * next page against this file):
 *   --display  headlines, section titles, the italic emphasis pattern
 *              (font-style: italic; color: var(--gold-ink)) already used
 *              throughout the homepage and legal pages.
 *   --body     everything else: paragraphs, nav, buttons, labels.
 *   --mono     micro-labels ONLY (eyebrows, tags, small uppercase captions).
 *              It is not a body or heading font anywhere in the current
 *              site, and per the Architecture Lock its footprint should
 *              shrink further in the redesign, not grow.
 *
 * Current font-weight footprint actually loaded today (index.html):
 *   Fraunces      300,400,500,600,700,800 (variable, opsz axis 9..144)
 *   Manrope       300,400,500,600,700
 *   JetBrains Mono 500,600
 * Three families, thirteen weight/style combinations. Flagged in the prior
 * audit as heavier than the performance budget wants — worth a real trim
 * when a page is actually rewritten, not addressed by this token file alone,
 * since removing a weight can only be verified safe once something stops
 * using it.
 */

/* ===========================================================================
   SPACING
   No numeric spacing scale exists anywhere in the current codebase — spacing
   today is ad hoc pixel values repeated inline. The values below are a
   FORMALIZATION of the pixel values already load-bearing across multiple
   templates (8, 12, 16, 20, 24, 32, 40, 48, 56, 80, 120 all recur verbatim
   in index.html and the legal-page template), not a new scale invented for
   this file.
   =========================================================================== */
:root {
  --space-1: 8px;
  --space-2: 12px;
  --space-3: 16px;
  --space-4: 20px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 40px;
  --space-8: 48px;
  --space-9: 56px;
  --space-10: 80px;
  --space-11: 120px;
}

/* ===========================================================================
   CONTAINERS
   Source: .container (index.html, marketing pages) and .doc (legal-page
   template). Two container widths for two page purposes — a marketing page
   and a reading page should keep looking different on purpose; this is not
   an inconsistency to unify away.
   =========================================================================== */
:root {
  --container-marketing: 1320px;   /* index.html .container max-width */
  --container-doc: 820px;          /* legal-page template .doc max-width */
  --gutter: 40px;                  /* side padding shared by both patterns */
}

/* ===========================================================================
   RADIUS
   2px is the dominant, near-universal value across every button, chip, card,
   and interactive control in the current codebase. Two documented exceptions
   exist today and are named here rather than silently forced to match:
     - circular status indicators (the "live" pulse dot) use 50%.
     - the cookie-consent banner panel uses 4px, not 2px. This is a real,
       small inconsistency already in production; fixing it means editing
       index.html, which is out of scope for Gate 1. Flagged for a later
       gate, not corrected here.
   =========================================================================== */
:root {
  --radius: 2px;
  --radius-round: 50%;
  --radius-panel: 4px;   /* the cookie-banner exception, named so it reads as
                             a deliberate exception rather than a stray value
                             if it's ever encountered again */
}

/* ===========================================================================
   SHADOW
   Exactly two box-shadow declarations exist anywhere in the current
   codebase. Both are reproduced here verbatim; nothing new is introduced.
   =========================================================================== */
:root {
  --shadow-glow: 0 0 12px var(--gold);                 /* homepage "live" status pulse */
  --shadow-panel: 0 20px 60px rgba(0, 0, 0, 0.6);       /* cookie-consent banner */
}

/* ===========================================================================
   BORDERS
   =========================================================================== */
:root {
  --border-hairline: 1px solid var(--rule);
  --border-hairline-strong: 1px solid var(--rule-strong);
}

/* ===========================================================================
   FOCUS-VISIBLE
   Identical rule structure in both templates today; only the color value
   differed (resolved above). Reproduced here as the single source of truth.
   =========================================================================== */
*:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: var(--radius);
}

/* ===========================================================================
   REDUCED MOTION
   Identical block, verbatim, in both the homepage and the legal-page
   template today. A clean, already-consistent rule — reproduced here
   unchanged as the shared source.
   =========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ===========================================================================
   BUTTON SYSTEM
   .btn-primary and .btn-secondary below are reproduced from index.html's
   ACTUAL CURRENT implementation (verified directly, not recalled from the
   now-deleted blog-article template, which used a different gradient-based
   .btn-primary that is no longer live anywhere).

   .btn-ghost does NOT currently exist on any live page. It existed only in
   the deleted Field Notes article template. It is reconstructed here from
   that known, previously-real pattern because the Architecture Lock calls
   for a primary/secondary/ghost system and new pillar pages will need a
   third, lower-emphasis link style — but this is new construction for
   future use, not a migration of something currently live, and that
   distinction should not be lost.
   =========================================================================== */

.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-4) var(--space-6);
  min-height: 56px;
  background: var(--gold);
  color: #14213E;
  font-family: var(--body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background 0.3s, transform 0.3s;
}
.btn-primary:hover,
.btn-primary:focus {
  background: var(--ivory);
  color: var(--ink);
  transform: translateX(4px);
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--body);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ivory-dim);
  text-decoration: none;
  background: none;
  border: none;
  border-bottom: 1px solid var(--rule-strong);
  padding-bottom: var(--space-1);
  cursor: pointer;
  transition: color 0.3s, border-color 0.3s;
}
.btn-secondary:hover,
.btn-secondary:focus {
  color: var(--gold-ink);
  border-color: var(--gold-ink);
}

/* ===========================================================================
   REGISTER 02 — SYSTEMS
   GATE: VISUAL SYSTEM ARCHITECTURE (Phase D). Tappmedia now spans an advisory
   relationship (Capital Recovery) and an applied-AI/technology practice (AI
   Architecture, Milo). Register 01 (the values above) was built for the
   first and has no vocabulary for the second. This block is that second
   vocabulary, expressed as overrides of the SAME token names, so a scoped
   element re-themes without any child selector needing to know which
   register it's in.
   Values are deliberately related to Register 01, not a new hue family:
   --ink is a darker, desaturated relative of the existing navy #14213E, not
   an unrelated black or "AI dark mode" tone. Gold itself is intentionally
   NOT overridden — it is the one connective thread a visitor should
   recognize across both registers.
   --gold-ink IS overridden, as a contrast correction rather than a design
   change: #7C5A16 was tuned for AA on cream (see :root above) and was never
   checked against a dark ground. Measured on Register 02: 2.81:1 on --ink,
   2.52:1 on --ink-soft, both well under the 4.5:1/3:1 thresholds that apply
   to its real uses (nav, footer, FAQ, links, labels, the Milo grade/gate
   cells). Pointing it at --gold rather than inventing a new hex keeps the
   correction inside the existing gold family and actually reinforces the
   cross-register connective thread the paragraph above describes: the gold
   accent becomes literally identical in both registers.
   Apply via class="register-systems" on a section or the <body>. Nothing
   outside that scope is affected.
   =========================================================================== */
.register-systems {
  --ink: #10182A;
  --ink-soft: #182236;
  --ivory: #E7E9EE;
  --ivory-dim: #9AA4B5;
  --gold-ink: var(--gold);
  --rule: rgba(231, 233, 238, 0.14);
  --rule-strong: rgba(231, 233, 238, 0.28);
  --sys-accent: #7C8A9E;
  --nav-bg: rgba(16, 24, 42, 0.72);
  --menu-bg: rgba(16, 24, 42, 0.98);
  background: var(--ink);
  color: var(--ivory);
}
:root {
  --nav-bg: rgba(239, 231, 216, 0.72);
  --menu-bg: rgba(239, 231, 216, 0.98);
}

/* ===========================================================================
   NAV REGISTER TRANSITION (index.html only)
   index.html's fixed nav sits outside the Milo section's register-systems
   scope, so it can't inherit the dark theme just by being a descendant. A
   small IntersectionObserver in index.html (not a scroll handler) toggles
   the class directly onto <nav> while the Milo section occupies the nav's
   own screen strip. Two things that plain reliance on cascade/inheritance
   would not reliably cover, restated explicitly here:
   1) `.register-systems` is a class selector (0,1,0), which outranks the
      bare-tag `nav { background: var(--nav-bg); }` rule (0,0,1) regardless
      of source order, so nav's own translucent background gets replaced by
      register-systems's opaque one unless restated at matching specificity.
   2) `.nav-links a`'s color reaches it only via `a { color: inherit }`
      through two inheritance hops from a class added by JS at runtime.
      Restated directly here rather than left to that chain.
   =========================================================================== */
nav.register-systems { background: var(--nav-bg); }
nav.register-systems .nav-links a { color: var(--ivory-dim); }
nav.register-systems .nav-links a:hover,
nav.register-systems .nav-links a:focus { color: var(--gold-ink); }
nav.register-systems .wordmark-text span { color: var(--gold-ink); }
nav.register-systems .nav-cta { border-color: var(--rule-strong); }
nav.register-systems .nav-cta:hover,
nav.register-systems .nav-cta:focus { border-color: var(--gold-ink); }

/* ===========================================================================
   SYSTEMS TYPEFACE
   IBM Plex Sans. Restrained and technical because it was drawn for IBM's own
   dense technical documentation, not because it reads as "futuristic" — the
   brief is explicit that the second is the wrong test. Scope: labels, data
   values, diagram text, and (only inside register-systems) body copy. Never
   at headline scale in Register 01; Fraunces never labels a data point.
   =========================================================================== */
:root {
  --systems: 'IBM Plex Sans', var(--body);
}
.register-systems { font-family: var(--systems); }
.register-systems .hero-display,
.register-systems h1,
.register-systems h2 {
  font-family: var(--display); /* headlines stay serif even inside Register 02 */
}

/* ===========================================================================
   MOTION SYSTEM
   Two speeds only. Fast for direct-response feedback, slow for anything that
   is assembling itself (a diagram, a data grid). No arbitrary middle values.
   One easing curve for entrances: a controlled, slightly mechanical settle,
   not a bounce. Reduced-motion handling above already collapses all of this
   to near-instant; nothing here needs its own reduced-motion rule.
   =========================================================================== */
:root {
  --motion-fast: 180ms;
  --motion-slow: 750ms;
  --motion-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ===========================================================================
   FIVE-STEP DIAGRAM
   Replaces a numbered list with a traced, connected sequence. Reuses the
   existing .reveal/.in convention (same IntersectionObserver, same
   reduced-motion bypass already wired on every page) rather than adding new
   JS: the diagram is itself a .reveal element, and its line/dots key off the
   .in class that already gets added when it scrolls into view.
   =========================================================================== */
.model-diagram { position: relative; margin-top: 72px; }
.model-diagram-line {
  position: absolute;
  top: 15px; left: 0; right: 0;
  height: 1px;
  background: var(--gold);
  opacity: 0.4;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--motion-slow) var(--motion-ease);
}
.model-diagram.in .model-diagram-line { transform: scaleX(1); }
.model-nodes {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px;
  position: relative;
}
.model-node { padding-top: 46px; position: relative; }
.model-node-dot {
  position: absolute; top: 0; left: 0;
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--ink-soft); border: 1px solid var(--gold); color: var(--gold-ink);
  font-family: var(--display); font-style: italic; font-size: 13px;
  opacity: 0; transform: scale(0.5);
  transition: opacity var(--motion-slow) ease, transform var(--motion-slow) ease;
}
.model-diagram.in .model-node-dot { opacity: 1; transform: scale(1); }
.model-node:nth-child(1) .model-node-dot { transition-delay: 0.15s; }
.model-node:nth-child(2) .model-node-dot { transition-delay: 0.32s; }
.model-node:nth-child(3) .model-node-dot { transition-delay: 0.49s; }
.model-node:nth-child(4) .model-node-dot { transition-delay: 0.66s; }
.model-node:nth-child(5) .model-node-dot { transition-delay: 0.83s; }
.model-node-name {
  font-family: var(--display); font-weight: 500; font-variation-settings: "opsz" 72;
  font-size: 20px; color: var(--ivory); margin-bottom: 10px;
}
.model-node-body { font-size: 14px; line-height: 1.6; color: var(--ivory-dim); font-weight: 300; }
@media (max-width: 900px) {
  .model-nodes { grid-template-columns: 1fr; gap: 40px; }
  .model-diagram-line {
    top: 0; left: 15px; right: auto; width: 1px; height: 100%;
    transform: scaleY(0); transform-origin: top;
  }
  .model-diagram.in .model-diagram-line { transform: scaleY(1); }
  .model-node { padding-top: 0; padding-left: 46px; }
  .model-node-dot { top: 0; left: 0; }
}

/* ===========================================================================
   MILO 12-DIMENSION GRID
   A structured grid, not a radar chart: the 12 dimensions are independent
   graded categories, not a shape meant to be read holistically, and a radar
   would imply a relationship between them that the actual methodology does
   not claim. Always exactly 12 cells. Dimension 12 (Legal & Regulatory) is
   never forced into a letter grade it doesn't actually receive — it keeps
   its real gate verdict, visually distinguished, because that is what is
   truthful about the methodology, not a simplification for symmetry.
   =========================================================================== */
.milo-specimen-label {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  margin-bottom: 32px; padding: 16px 20px;
  border: 1px solid var(--sys-accent);
  font-size: 13px; line-height: 1.6; color: var(--ivory-dim);
}
.milo-specimen-tag {
  font-family: var(--systems); font-weight: 600; font-size: 10px;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-ink);
  white-space: nowrap;
}
.milo-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--rule); border: 1px solid var(--rule);
}
.milo-cell {
  background: var(--ink); padding: 20px;
  display: flex; flex-direction: column; gap: 10px;
  opacity: 0; transform: translateY(8px);
  transition: opacity var(--motion-fast) var(--motion-ease), transform var(--motion-fast) var(--motion-ease);
}
.milo-grid.in .milo-cell { opacity: 1; transform: translateY(0); }
.milo-grid.in .milo-cell { transition-delay: calc(var(--d, 0) * 60ms); }
.milo-cell-num {
  font-family: var(--systems); font-size: 10px; letter-spacing: 0.14em;
  color: var(--sys-accent); font-weight: 500;
}
.milo-cell-name {
  font-family: var(--systems); font-size: 13px; line-height: 1.4;
  color: var(--ivory); font-weight: 500; flex-grow: 1;
}
.milo-cell-grade {
  align-self: flex-start;
  font-family: var(--display); font-style: italic; font-weight: 600; font-size: 22px;
  color: var(--gold-ink);
}
.milo-cell-gate {
  align-self: flex-start;
  font-family: var(--systems); font-size: 11px; font-weight: 600;
  letter-spacing: 0.06em; color: var(--gold-ink);
  border: 1px solid var(--gold-ink); padding: 4px 8px;
}
@media (max-width: 700px) {
  .milo-grid { grid-template-columns: 1fr; }
}

/* ===========================================================================
   RECOVERY TAXONOMY
   Replaces ten identical chips with a grouped structure, so the page
   communicates the actual shape of the offering (three mechanisms of
   recovery) rather than ten interchangeable tiles.
   =========================================================================== */
.recovery-taxonomy { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.recovery-group-label {
  font-family: var(--systems); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  font-weight: 600; color: var(--gold-ink); padding-bottom: 12px; margin-bottom: 16px;
  border-bottom: 1px solid var(--gold);
}
.recovery-group-list { list-style: none; margin: 0; padding: 0; }
.recovery-group-list li {
  font-size: 14px; line-height: 1.8; color: var(--ivory-dim); font-weight: 300;
  padding: 8px 0; border-bottom: 1px solid var(--rule);
}
.recovery-group-list li:last-child { border-bottom: none; }
@media (max-width: 700px) {
  .recovery-taxonomy { grid-template-columns: 1fr; gap: 32px; }
}

/* Reconstructed, not migrated — see note above. */
.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  font-family: var(--body);
  font-size: 14px;
  font-weight: 500;
  color: var(--ivory-dim);
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  transition: color 0.3s;
}
.btn-ghost:hover,
.btn-ghost:focus {
  color: var(--ivory);
}