/* ==========================================================================
   PNW Peptides Labs — tokens.css
   THE SINGLE FILE YOU EDIT FOR THIS CLIENT
   Conforms to: TRP Replication Blueprint, page 22 (Design Token Architecture)

   Derived from the PNW brand banner (navy / blue / orange, PNW mountains).
   Every value below has been WCAG-validated — ratios noted inline.
   Do not change a value without re-running the contrast check in §Verify.
   ========================================================================== */

:root {

  /* ---- Brand ------------------------------------------------------------
     The banner blue (#1B7BE8) is beautiful but only reaches 4.16:1 against
     white — it fails AA for body text and for white button labels. It is
     retained as --brand-blue-bright for large display type and glows on
     navy, where it is safe. Interactive blue is one step darker.          */

  --brand-primary:        #1560BD;   /* links, primary CTA fill  6.10:1 on white ✅ */
  --brand-primary-hover:  #0F4A8F;   /* CTA hover                8.76:1 on white ✅ */
  --brand-secondary:      #17315F;   /* deep supporting navy                        */
  --brand-accent:         #F47C20;   /* TRUE BRAND ORANGE — dark surfaces only
                                        6.55:1 on navy-900 ✅ · 2.71:1 on white ❌ */
  --brand-accent-ink:     #B85206;   /* same hue, darkened for light surfaces
                                        4.94:1 on white ✅  (13th token — see note) */
  --brand-blue-bright:    #1B7BE8;   /* display type & glows on navy. NOT for
                                        body text or white-label buttons.           */

  /* ---- Surfaces --------------------------------------------------------- */
  --brand-bg:             #FFFFFF;   /* page background — catalog stays light      */
  --brand-surface:        #F5F7FA;   /* cards, panels            17.05:1 text ✅    */
  --brand-surface-alt:    #0A1733;   /* NAVY. Header, hero, footer, dark bands
                                        17.75:1 with white ✅                       */
  --brand-surface-deep:   #102347;   /* navy elevation — cards on dark bands        */
  --brand-border:         #D6DEE8;   /* dividers, input borders                     */

  /* ---- Text ------------------------------------------------------------- */
  --brand-text:           #0D1522;   /* body copy                18.30:1 ✅         */
  --brand-text-muted:     #586474;   /* captions, meta, RUO fine print  6.02:1 ✅   */
  --brand-text-inverse:   #FFFFFF;   /* text on navy / on primary fill              */
  --brand-heading:        #0A1733;   /* headings — navy, not black  17.75:1 ✅      */

  /* ---- Type -------------------------------------------------------------
     Page 21 recommends collapsing 4 slots onto 2 families. Done:
     Montserrat carries display + heading, Inter carries body + accent.
     The 40/35/30/25/20/16 scale from page 03 is STRUCTURAL — do not change. */

  --brand-font-display:   "Montserrat", system-ui, sans-serif;   /* 800 wt  */
  --brand-font-heading:   "Montserrat", system-ui, sans-serif;   /* 700 wt  */
  --brand-font-body:      "Inter", system-ui, sans-serif;        /* 400/500 */
  --brand-font-accent:    "Inter", system-ui, sans-serif;        /* 600 wt  */

  /* ---- Semantic states --------------------------------------------------- */
  --brand-success:        #1a7f4b;
  --brand-warning:        #b26a00;
  --brand-error:          #b3261e;

  /* ==========================================================================
     STRUCTURAL — DO NOT CHANGE PER CLIENT
     Lifted verbatim from TRP Replication Blueprint page 03. These are the
     numbers the scaffold's layouts were built against. Changing one here
     silently reflows every Elementor template that was designed to it.
     ========================================================================== */

  /* Layout — Blocksy global */
  --pnw-container-max:      1290px;
  --pnw-container-narrow:   750px;
  --pnw-wide-offset:        130px;
  --pnw-content-space-desk: 60px;
  --pnw-content-space-tab:  60px;
  --pnw-content-space-mob:  50px;

  /* Breakpoints — Elementor kit. Mirrored here for use in child-theme media
     queries so there is one place these numbers exist. */
  --pnw-bp-desktop:         1025px;
  --pnw-bp-tablet:          768px;

  /* Type scale — 40/35/30/25/20/16, weight n7, line-height 1.5 */
  --pnw-h1:                 40px;
  --pnw-h2:                 35px;
  --pnw-h3:                 30px;
  --pnw-h4:                 25px;
  --pnw-h5:                 20px;
  --pnw-h6:                 16px;
  --pnw-body-size:          16px;
  --pnw-body-lh:            1.65;
  --pnw-heading-lh:         1.5;
  --pnw-btn-size:           15px;
  --pnw-breadcrumb-size:    12px;

  /* Components */
  --pnw-btn-min-height:     40px;
  --pnw-btn-padding:        5px 20px;
  --pnw-input-height:       40px;
  --pnw-textarea-height:    170px;
  --pnw-field-radius:       3px;
  --pnw-border-width:       1px;
}

/* ==========================================================================
   WHY THERE IS A 13th TOKEN

   Page 22 says resist adding tokens, and that is right — every extra token
   is another per-client decision. --brand-accent-ink is NOT a decision.
   It is a derived value that exists because the brand orange is physically
   unusable as text on white (2.71:1, well below the 4.5:1 floor).

   Without it, one of two things happens: the orange gets used on white and
   fails accessibility, or someone picks a random darker orange inline and
   the token system leaks. Encoding it once removes both failure modes.

   RULE:  orange on navy      → --brand-accent      (#F47C20)
          orange on white     → --brand-accent-ink  (#B85206)
          never white text on any orange fill (max 4.27:1 — fails AA)
   ========================================================================== */

/* ==========================================================================
   VERIFY — paste into devtools console on home, shop, product, cart,
   checkout, my-account, gate. Literals should be near zero.

   document.getElementById('wp-custom-css')?.textContent
     .match(/#[0-9a-f]{3,8}|rgba?\(/gi);

   [...document.styleSheets]
     .filter(s => /elementor-post-\d+/.test(s.ownerNode?.id || ''))
     .map(s => { let t=''; for (const r of s.cssRules) t += r.cssText;
       return { id: s.ownerNode.id,
                literals: (t.match(/#[0-9a-f]{3,8}|rgba?\(/gi)||[]).length,
                vars: (t.match(/var\(--/g)||[]).length }; });
   ========================================================================== */