/* ═══════════════════════════════════════════════════════════════════════════
   css/tokens.css — the house style, now the link.tattoo palette. Loaded by
   both pages before their own sheet, so colours, type and spacing can only
   be changed in one place. Variable *roles* are unchanged — --ink is still
   "surfaces, page first", --paper is still "text" — so every component
   sheet keeps working; only the values moved to the marketing site's.
   ═══════════════════════════════════════════════════════════════════════════ */
:root{
  /* ink: surfaces, the page first (link.tattoo warm paper) */
  --ink:#efe9dd; --ink2:#e8e3d7; --ink3:#e0dac9; --ink4:#d7d0bc;
  /* paper: text, and the same at lower strengths */
  --paper:#141412; --dim:rgba(20,20,18,.55); --faint:rgba(20,20,18,.09);
  --line:rgba(20,20,18,.16);
  /* the three accents, mapped onto link.tattoo's:
     red = attention (the brand accent), acid = go (the "live" green),
     amber = careful (the gold) */
  --red:#c22f2f; --acid:#1f8a4c; --amber:#7e6c3e;
  /* type — same faces as the marketing site, plus its serif */
  --dsp:'Anton',sans-serif; --mn:'Space Mono',monospace;
  --serif:'Playfair Display',Georgia,serif;
  /* corners, matching styles.css: cards 14, controls 11, buttons pill */
  --radius:14px; --radius-s:11px; --radius-pill:9999px;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{background:var(--ink);color:var(--paper);font:15px/1.45 var(--mn)}
button,input,textarea,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--acid);outline-offset:2px}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.hidden{display:none!important}