/* roqueventures.com — tokens (R3, comp B2 "Cinematic stage"). Frame tokens never change;
   each gear brings its own field/highlight/accent. Every value here traces to compB2.css. */
:root{
  /* frame */
  --paper:#FFFFFF; --wash:#F5F5F7; --ink:#000000; --slate:#6E6E73; --graphite:#1C1C1E;
  --hair:rgba(0,0,0,.10); --hair-d:rgba(255,255,255,.18);
  --font:"Instrument Sans",-apple-system,"Helvetica Neue",Arial,sans-serif;
  /* six type stops @1440 */
  --t1:88px; --t2:56px; --t3:28px; --t4:19px; --t5:15px; --t6:14px;
  --wrap:1256px; --pad:32px; --navh:60px; --band:96px; --band-lead:64px; --swap:250ms; /* band-lead: the lead band fits one 900 screen at 1440 (R4 fix2 D10) */
  /* bezel / device chrome (never a per-gear value) */
  --bezel:#0e0f11; --bezel-top:#26282c; --bezel-bottom:#0c0d0f;
  --shadow-lg:rgba(0,0,0,.6); --shadow-md:rgba(0,0,0,.5); --shadow-tile:rgba(0,0,0,.35); --shadow-step:rgba(0,0,0,.18);
  --hair-inset-14:rgba(255,255,255,.14); --hair-inset-16:rgba(255,255,255,.16); --edge-35:rgba(255,255,255,.35);
  --dim-66:rgba(255,255,255,.66); --dark-lede:#B0B0B6; --dark-src:#9A9AA0;
  /* radii */
  --r-focus:2px; --r-scr:8px; --r-scr-390:4px; --r-laptop:18px; --r-laptop-390:10px;
  /* FRAMES F4: every phone screen radius is 16, the largest that clips no glyph of any frame at its smallest on-page
     size (receipts/frames-build/corners.py: 83 frame px x 164/780 = 17.4); each bezel = screen radius + its padding */
  --r-bezel-foot:12px; --r-phone:25px; --r-phone-390:22px; --r-phone-scr:16px; --r-phone-scr-390:16px;
  --r-tile:16px; --r-tile-390:12px; --r-tile-pic:14px; --r-tile-scr:6px;
  --r-step-laptop:12px; --r-step-phone:24px; --r-step-phone-scr:16px;
  --r-control:8px; /* the one control radius; no rounded-full shape anywhere (DESIGN.md §6) */
  /* current gear (JS/data-gear sets --field/--field-hi/--accent/--accent-ink) */
  --field:var(--g-system); --field-hi:var(--g-system-hi); --accent:var(--a-system); --accent-ink:var(--a-system-ink);
}
@media (max-width:640px){
  :root{ --t1:40px; --t2:30px; --t3:22px; --t4:17px; --t5:13px; --t6:12px; --pad:20px; --navh:52px; --band:56px; }
}
/* per-gear field (tint) + highlight + accent, contrast measured (BUILD-SPEC) */
:root, [data-gear="system"]{ --g-system:#0B3D30; --g-system-hi:#1E8A6A; --a-system:#2FBF8F; --a-system-ink:#000; }
[data-gear="system"]{ --field:var(--g-system); --field-hi:var(--g-system-hi); --accent:var(--a-system); --accent-ink:var(--a-system-ink); }
[data-gear="game"]{ --field:#0B1220; --field-hi:#1A2A4A; --accent:#F2D300; --accent-ink:#000; }
[data-gear="website"]{ --field:#0F1C33; --field-hi:#23406B; --accent:#F26A1B; --accent-ink:#000; }
[data-gear="reactivation"]{ --field:#3A2418; --field-hi:#7A4A2A; --accent:#E9B04B; --accent-ink:#000; }
[data-gear="agent"]{ --field:#141416; --field-hi:#3A3A40; --accent:#FFFFFF; --accent-ink:#000; }
/* R4: two product tints for the More-work tiles only (never a stage gear) */
[data-gear="jobsend"]{ --field:#151A21; --field-hi:#2A3140; --accent:#4C8DFF; --accent-ink:#000; }
[data-gear="reconciled"]{ --field:#E6EAF1; --field-hi:#F8FAFD; --accent:#2563EB; --accent-ink:#FFF; }