/* ============================================================================
   anunciazo.com  ·  css/tokens.css  ·  FROZEN after founder approval
   ----------------------------------------------------------------------------
   Part 1 is the header's :root, extracted verbatim from headers/b-tablero/
   index.html. Those values are frozen: the shipped hero is measured against
   them and qa/hero-parity.mjs fails if any of them moves.
   Part 2 adds the tokens the rest of the desk needs (desk, kraft, tape,
   receipt, polaroid, shadows, spacing, rhythm, z-index).
   Part 3 is the ONE type scale every section reads on paper with.
   No section may redefine a token here; ask the manager instead.
   ========================================================================= */

:root{
  /* ---------- 1. FROZEN: the hero's materials ---------------------------- */
  --felt:#1D4636;          /* fallback under felt.webp */
  --wood:#8B5A2B;          /* fallback for the border-image frame */
  --paper:#F7F5F0;         /* index-card paper base (BRIEF-B S2) */
  --paper-edge:#DFDBD2;
  --ink:#171714;           /* 16.5:1 on --paper */
  --ink-soft:#55544E;      /* 6.97:1 on --paper */
  --nav-ink:#3A3A36;       /* 11.4:1 on white */

  /* the single accent of the page: one coral, used on every CTA and stamp.
     #D8382F gives white text 4.64:1 (BRIEF S5 demands >= 4.5:1);
     BRIEF-B's #E8483F only reaches 3.87:1, which fails on the 15px nav label. */
  --coral:#D8382F;
  --coral-press:#BE2E26;
  --string:#C8322B;

  /* accents that live ONLY inside the prints (BRIEF-B S1.6) */
  --hook-1:#F5D90A;
  --hook-2:#F28C28;
  --hook-3:#4FB3FF;

  /* one documented radius system: paper 3, buttons 6, prints 10 (inner 4),
     play button round because it is a play button on a photograph. */
  --r-paper:3px;
  --r-btn:6px;
  --r-print:10px;
  --r-print-in:4px;

  --shadow-paper:0 6px 14px rgba(0,0,0,.35);
  --shadow-paper-hi:0 14px 26px rgba(0,0,0,.45);
  --nav-h:64px;

  --sans:'Archivo', system-ui, sans-serif;
  --display:'Archivo Black', 'Archivo', system-ui, sans-serif;

  /* ---------- 2. NEW: the rest of the desk ------------------------------- */

  /* the desk itself: the same wall tone the hero's body already used,
     plus a deeper tone for the seams and the footer edge. */
  --desk:#3b2a1a;
  --desk-deep:#2A1D11;
  --desk-edge:#54402B;     /* the lit top edge of an oak surface */

  /* kraft: never a flat tan. Face, a darker cut edge, a deeper fold tone and
     its own ink, because coral on kraft is muddy and --ink is too cold. */
  --kraft:#C9A66B;
  --kraft-edge:#A07E47;    /* the cut edge of the board, 1px, always present */
  --kraft-deep:#B08C52;    /* folds, tab undersides, the inside of a folder */
  --kraft-ink:#2B2418;     /* 8.6:1 on --kraft */
  --kraft-ink-soft:#5A4B33;

  /* masking tape: translucent so the paper under it shows through */
  --tape:#E7DCC3;
  --tape-a:.85;

  /* thermal receipt paper: colder and lighter than index-card paper, with a
     grey-black ink that never reaches --ink (thermal print is never black). */
  --receipt:#FBFBF9;
  --receipt-ink:#25241F;
  --receipt-dim:#6E6D66;

  /* polaroid / photo-print white: neutral, never cream */
  --polaroid:#FAFAF7;

  /* rope and clothespin */
  --rope:#C2AE8C;
  --rope-dark:#8B7754;
  --clip-wood-lo:#A87F49;
  --clip-wood-hi:#E3C48D;
  --brass:#C9A227;

  /* shadows. Two families, because the two situations read differently:
     PINNED on felt  -> the paper floats off the board, soft and wide
                        (--shadow-paper / --shadow-paper-hi, frozen above)
     LYING on the desk -> a tight contact shadow plus a wide soft one
     OBJECT on the desk (folder, card box) -> a visible thickness edge too */
  --shadow-desk:0 1px 1px rgba(0,0,0,.30), 0 8px 18px rgba(0,0,0,.30);
  --shadow-desk-hi:0 2px 2px rgba(0,0,0,.28), 0 18px 34px rgba(0,0,0,.38);
  --shadow-object:0 1px 0 rgba(0,0,0,.30), 0 3px 3px rgba(0,0,0,.22), 0 18px 30px rgba(0,0,0,.38);
  --shadow-tape:0 1px 2px rgba(0,0,0,.22);
  --shadow-inset-paper:inset 0 0 0 1px rgba(0,0,0,.05);

  /* ---------- spacing scale (one step = one decision) -------------------- */
  --sp-1:4px;
  --sp-2:8px;
  --sp-3:12px;
  --sp-4:16px;
  --sp-5:24px;
  --sp-6:32px;
  --sp-7:48px;
  --sp-8:64px;
  --sp-9:96px;

  /* ---------- section rhythm: the vertical gaps on the desk -------------- */
  --desk-pad:clamp(12px,2.6vw,44px);      /* desk margin left and right */
  --gap-section:clamp(56px,7.5vw,128px);  /* between two objects/sections */
  --gap-object:clamp(24px,3.4vw,56px);    /* between objects inside a section */
  --gap-row:clamp(14px,1.6vw,26px);       /* between rows inside one object */
  --content-max:1200px;                   /* a sheet never reads wider */
  --board-max:1100px;                     /* a framed board on the desk */
  --measure:62ch;                         /* one column of body copy */
  --anchor-offset:calc(var(--nav-h) + 12px); /* scroll-margin for #anchors */

  /* ---------- z-index scale --------------------------------------------- */
  --z-felt:0;        /* the string lies ON the felt, under every paper */
  --z-paper:1;       /* .pinned, every sheet, card, tag */
  --z-lift:3;        /* a card pulled out of the box, an open folder */
  --z-pin:5;         /* pins, tape and clips sit on top of their paper */
  --z-tab:6;         /* index tabs stand above the paper they belong to */
  --z-float:10;      /* a dragged element, a spotlit print */
  --z-nav:30;
  --z-sticky:40;
  --z-lightbox:60;
}

/* the nav is shorter on phones; the hero's dvh maths reads --nav-h, so this
   has to be a token override and not a nav-only rule. */
@media (max-width: 899px){
  :root{--nav-h:56px}
}

/* ============================================================================
   3. THE TYPE SCALE.  Archivo 500/700/900 and Archivo Black only.
   Six builders share these six classes: do not invent a seventh size.
   Every size is a clamp() so it needs proving once, not per breakpoint.
   ========================================================================= */

/* section headline on a paper sheet or strip. Max 2 lines; pair with
   max-width:20ch..24ch. The only Archivo Black on the page besides the
   wordmark, the hero H1, the hooks and the CTA cards. */
.t-h2{
  margin:0;
  font-family:var(--display);
  font-weight:400;                 /* Archivo Black ships at 400 */
  font-size:clamp(1.65rem,3.35vw,3rem);
  line-height:1.06;
  letter-spacing:-.022em;
  color:var(--ink);
}

/* the title of one object: a step card, a format name, a pack name, a FAQ
   question. Archivo 900, not Archivo Black, so it never competes with .t-h2. */
.t-h3{
  margin:0;
  font-family:var(--sans);
  font-weight:900;
  font-size:clamp(1.05rem,1.45vw,1.4rem);
  line-height:1.2;
  letter-spacing:-.012em;
  color:var(--ink);
}

/* body copy read on paper: paragraphs, answers, descriptions. */
.t-body{
  margin:0;
  font-family:var(--sans);
  font-weight:500;
  font-size:clamp(.95rem,1.08vw,1.15rem);
  line-height:1.55;
  color:var(--ink);
}

/* captions, tags, footnotes, the small print of an offer. */
.t-small{
  margin:0;
  font-family:var(--sans);
  font-weight:500;
  font-size:clamp(.78rem,.9vw,.94rem);
  line-height:1.4;
  color:var(--ink-soft);
}

/* tracked caps INSIDE an object: a tab, a kraft label, a receipt header, a
   column head. Not a section eyebrow (that is .t-eyebrow, max 5 on the page). */
.t-label{
  margin:0;
  font-family:var(--sans);
  font-weight:700;
  font-size:clamp(.64rem,.76vw,.8rem);
  line-height:1.25;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--ink-soft);
}

/* the section eyebrow above a .t-h2. Allowed in s01 s03 s05 s10 s11 only;
   build.mjs counts [data-qa=eyebrow] and refuses a sixth. */
.t-eyebrow{
  margin:0 0 var(--sp-3);
  font-family:var(--sans);
  font-weight:700;
  font-size:clamp(.68rem,.8vw,.88rem);
  line-height:1.2;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-soft);
}

/* the "typed on paper" voice: a checklist line, a quoted analysis line, the
   body of a receipt or a dossier sheet. Still Archivo, never a monospace or a
   typewriter face; the effect comes from the tighter size, the open leading
   and the slight positive tracking, not from the typeface. */
.t-typed{
  margin:0;
  font-family:var(--sans);
  font-weight:500;
  font-size:clamp(.86rem,.98vw,1.02rem);
  line-height:1.62;
  letter-spacing:.012em;
  color:var(--ink);
}

/* tabular numerals wherever a number is read as a number (receipt, prices,
   counts). Only ever inside [data-claim] while the numbers are still theirs. */
.t-num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}