/* ==========================================================================
   nest-jerky / tokens.css — ENTIRE visual identity (contract §7)
   jerkynest.com — "Smokehouse Americana"
   Motion: data-motion="punch" — hard, fast stamp-ins. No easing dawdle.
   --------------------------------------------------------------------------
   3-layer structure: primitives → semantic overrides → brand physics.
   Special: this skin runs LIGHT (bone) by default but slams into full-dark
   "char blocks" for section breaks — the .t-dark scope below re-points the
   semantic tokens, so any component dropped inside just works.
   @font-face lives in the skin's font CSS enqueued by functions.php.
   ========================================================================== */

/* ---- 1. Primitives: the smokehouse palette ------------------------------- */
:root {
  --jk-bone:        #F3EDE3;  /* sun-bleached bone — page ground            */
  --jk-bone-raised: #FAF5EB;  /* butcher paper — cards                      */
  --jk-char:        #1B1713;  /* charred bark — ink & dark blocks           */
  --jk-char-raised: #292218;  /* ember-lit char — surfaces inside .t-dark   */
  --jk-blood:       #9E2A20;  /* blood red — brand & CTA                    */
  --jk-ember:       #CC5A24;  /* live ember — hot accent                    */
  --jk-kraft:       #C8A271;  /* kraft tag — warm support                   */
  --jk-smoke:       #57504A;  /* cold smoke — secondary text                */
  --jk-ash:         #DDD3C2;  /* ash line — hairlines on bone               */
  --jk-soot:        #3A322A;  /* soot line — hairlines on char              */
}

/* ---- 2. Semantic overrides (contract §2) --------------------------------- */
:root {
  --color-bg:       var(--jk-bone);
  --color-surface:  var(--jk-bone-raised);
  --color-ink:      var(--jk-char);
  --color-ink-soft: var(--jk-smoke);
  --color-brand:    var(--jk-blood);
  --color-accent:   var(--jk-ember);
  --color-cta:      var(--jk-blood);
  --color-cta-ink:  var(--jk-bone);
  --color-line:     var(--jk-ash);

  --shadow-color: rgb(27 23 19 / 0.14);  /* harder edge than the default    */
}

/* ---- 2b. .t-dark — char section override ---------------------------------
   Slap this class on any full-bleed section to flip it to the dark block
   identity. Components inside keep consuming the same semantic tokens.   */
.t-dark {
  --color-bg:       var(--jk-char);
  --color-surface:  var(--jk-char-raised);
  --color-ink:      var(--jk-bone);
  --color-ink-soft: var(--jk-kraft);
  --color-line:     var(--jk-soot);
  --color-accent:   var(--jk-ember);
  /* blood reads muddy on char — embers carry the brand in the dark */
  --color-brand:    var(--jk-ember);
  --color-cta:      var(--jk-blood);
  --color-cta-ink:  var(--jk-bone);
  --shadow-color: rgb(0 0 0 / 0.5);

  background-color: var(--color-bg);
  color: var(--color-ink);
}

/* ---- 3. Brand physics -----------------------------------------------------
   punch: shortest reveal in the family — content STAMPS in and stops. */
:root {
  --radius-base: 0px;                              /* cleaver-cut corners   */
  --dur-reveal: 380ms;                             /* fast hit              */
  --ease-brand: cubic-bezier(0.25, 1, 0.5, 1);     /* power4-ish: hard out  */

  /* Typography: poster-weight slab display + workwear grotesque body. */
  --font-display: "Archivo Black", "Arial Black", "Helvetica Neue",
                  Impact, sans-serif;
  --font-body: "Barlow", "Helvetica Neue", Arial, system-ui, sans-serif;
}

/* Light by default; .t-dark blocks flip their own scheme so any native
   controls inside a char section render dark too. */
:root {
  color-scheme: light;
}

.t-dark {
  color-scheme: dark;
}

/* Kraft is the tag/label garnish (stamps, stickers, texture fills). */
:root {
  --brand-garnish: var(--jk-kraft);
}

/* ---- 4. Contrast receipts (WCAG, computed — keep updated if palette moves)
   LIGHT (bone):
   ink      / bg   15.30:1  AAA
   ink-soft / bg    6.80:1  AA+
   brand    / bg    6.43:1  AA+  (blood red is text-safe on bone)
   cta-ink  / cta   6.43:1  AA+
   accent   / bg    3.57:1  — ember: large/bold text & non-text only
   DARK (.t-dark, char):
   ink      / bg   15.30:1  AAA  (bone on char)
   ink-soft / bg    7.52:1  AAA  (kraft on char)
   brand    / bg    4.29:1  — ember swap: large/bold headings & accents;
                              body copy inside .t-dark stays on --color-ink.
   ------------------------------------------------------------------------ */