/* ============================================================
   REV design tokens  ·  v0.1  ·  2026-10-15
   ------------------------------------------------------------
   This is the ONE file to swap when AgileCat's style sheet lands.
   Everything downstream (system.html, strategy page, deck, landing
   page) reads these custom properties and nothing else.

   Names are semantic (ink, paper, accent, tint) not literal (blue,
   gray), so Erin's palette can be remapped without touching markup.

   Current values are the bridge system: revlng.com colors + the
   AgileCat sales deck's structure. See DESIGN.md for the rationale.
   ============================================================ */

:root {
  /* ---------- Logo (one-line swap) ----------
     Three states are shipped so the hero can be shown with each.
     data-logo="current" | "deck" | "none" on <html> or any ancestor. */
  --logo-url:        url("logo/rev-current.png");   /* revlng.com header mark, 400x136 */
  --logo-ratio:      400 / 136;                      /* width / height of the file above */
  --logo-h:          44px;                           /* rendered height in the nav */
  --logo-h-footer:   28px;

  /* ---------- Color: semantic ---------- */
  --paper:        #FFFFFF;   /* page ground */
  --ink:          #141414;   /* headlines, body on paper (site #212121, deck #000) */
  --ink-2:        #4B5563;   /* secondary text */
  --ink-3:        #8A94A6;   /* captions, placeholders, rules on dark */
  --accent:       #1863DC;   /* REV blue. Deck flame is #007AFF; swap here if Erin standardizes */
  --accent-deep:  #0056A7;   /* hover, blue bands on site */
  --accent-ink:   #FFFFFF;   /* text on accent */
  --tint:         #E8F4FB;   /* pale-blue section ground (site) */
  --tint-2:       #F1F4F8;   /* cool light gray (deck's diagonal panel, site #f4f4f4) */
  --rule:         #D7DDE6;   /* thin rules, borders */
  --rule-strong:  #141414;   /* thin-rule list dividers on paper */
  --dark:         #0B0D10;   /* dark ground (deck cover variant, stat band alt) */
  --dark-ink:     #FFFFFF;   /* text on dark */
  --trace:        #94C11F;   /* logo green. TRACE ONLY while the current logo carries it.
                                Never a surface, never a button. Set to var(--accent) to retire. */
  --success:      #1E8E5A;
  --danger:       #C0392B;

  /* ---------- Type ---------- */
  --font-display: "Plus Jakarta Sans", "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Plus Jakarta Sans", "Helvetica Neue", Arial, sans-serif;
  --font-mono:    ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --w-display: 800;
  --w-head:    700;
  --w-sub:     600;
  --w-body:    400;
  --w-medium:  500;

  /* fluid scale: mobile → desktop */
  --t-display: clamp(2.5rem, 1.6rem + 4.2vw, 4.75rem);   /* 40 → 76 hero */
  --t-h1:      clamp(2.125rem, 1.4rem + 3vw, 3.5rem);    /* 34 → 56 */
  --t-h2:      clamp(1.75rem, 1.3rem + 1.8vw, 2.5rem);   /* 28 → 40 */
  --t-h3:      clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem);   /* 20 → 24 */
  --t-lead:    clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem);/* 18 → 22 */
  --t-body:    1.0625rem;                                 /* 17 */
  --t-small:   0.9375rem;                                 /* 15 */
  --t-kicker:  0.75rem;                                   /* 12, tracked caps */
  --t-stat:    clamp(2.5rem, 1.8rem + 3.5vw, 4.5rem);     /* 40 → 72 */

  --lh-tight:  1.02;
  --lh-head:   1.1;
  --lh-body:   1.55;
  --track-kicker: 0.14em;
  --track-display: -0.02em;

  /* ---------- Space & shape ---------- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;
  --gutter: clamp(16px, 4vw, 48px);
  --container: 1200px;
  --container-text: 760px;
  --section-y: clamp(64px, 8vw, 128px);

  --radius: 6px;       /* buttons, inputs. Site is near-square; deck is square. */
  --radius-lg: 10px;   /* cards, photo tiles */
  --radius-pill: 999px;   /* buttons: radius = height / 2 (CTA research, 2026-09-29) */
  --slant: 14%;        /* diagonal crop inset: top-left corner moves right by this */
  --slant-deg: 32deg;  /* deck wedge angle from vertical, for pseudo-element panels */

  --shadow-card: 0 1px 2px rgba(20,20,20,.06), 0 8px 24px rgba(20,20,20,.08);
  --shadow-cta:  0 6px 18px rgba(24,99,220,.28);

  --ease: cubic-bezier(.2,.7,.2,1);
  --dur: 180ms;
}

/* ---------- Logo states ---------- */
[data-logo="deck"]    { --logo-url: url("logo/rev-deck-mark.png"); --logo-ratio: 1385 / 600; --logo-h: 40px; --logo-h-footer: 24px; }
[data-logo="none"]    { --logo-url: none; }

/* ---------- Dark surface remap ----------
   Any block with .on-dark flips the semantic tokens so children need no
   special-casing. Logo on dark is NOT shipped: both marks are built for
   paper. The reversed file comes from AgileCat. */
.on-dark {
  --paper: var(--dark);
  --ink: var(--dark-ink);
  --ink-2: #B6BDC9;
  --ink-3: #7C8595;
  --rule: rgba(255,255,255,.16);
  --rule-strong: rgba(255,255,255,.55);
  --tint: rgba(255,255,255,.06);
  --tint-2: rgba(255,255,255,.04);
}
.on-accent {
  --paper: var(--accent);
  --ink: var(--accent-ink);
  --ink-2: rgba(255,255,255,.82);
  --ink-3: rgba(255,255,255,.62);
  --rule: rgba(255,255,255,.28);
  --rule-strong: rgba(255,255,255,.7);
  --tint: rgba(255,255,255,.08);
}