/* ===========================================================================
   PICKLE BEAR — DESIGN TOKENS
   ---------------------------------------------------------------------------
   This is the transferable layer. Every mockup, component and screen in this
   prototype reads from here and nowhere else. No literal color, font or
   spacing value appears anywhere else in the CSS.

   When the real brand values are locked, you change them HERE and the whole
   clickthrough re-skins. When this moves off the sandbox into a real stack,
   this file moves with it unchanged.

   Palette values below are taken from the packaging sheet (2026-09-11).
   Anything marked DRAFT was not in that sheet and is my proposal.
   ======================================================================== */

:root {
  /* --- Raw palette -------------------------------------------------------
     Named after the thing, not the use. Never reference these directly in a
     component; go through the semantic tokens below. */
  --pb-olive:        #6B7F3D;   /* from sheet */
  --pb-olive-deep:   #4F5E2D;   /* DRAFT — darker olive for text on cream */
  --pb-dill:         #8FA63F;   /* DRAFT — lighter product accent */
  --pb-alpine:       #7FB2C0;   /* from sheet */
  --pb-alpine-deep:  #2F6B79;   /* DRAFT — dark enough for small text on cream (5.4:1); #4E8C9C was 3.3 */
  --pb-pink:         #E68AA7;   /* from sheet */
  --pb-pink-hot:     #D9527E;   /* DRAFT — hotter pink for small accents */
  --pb-gray:         #E6E8E2;   /* from sheet */
  --pb-black:        #111111;   /* from sheet */

  /* DRAFT — the packs all sit on a warm cream that is NOT in the swatch row.
     Sample the real substrate and replace these two. */
  --pb-cream:        #F4EDE0;
  --pb-cream-deep:   #E8DECB;

  /* --- Semantic tokens ---------------------------------------------------
     What components actually use. Re-point these to re-theme without touching
     a single component rule. */
  --pb-bg:            var(--pb-cream);
  --pb-bg-alt:        var(--pb-cream-deep);
  --pb-bg-invert:     var(--pb-black);
  --pb-surface:       #FFFFFF;

  --pb-fg:            var(--pb-black);
  --pb-fg-muted:      #5E584E;    /* passes 4.5:1 on cream-deep; #6A6459 sat at 4.4 */
  --pb-fg-invert:     var(--pb-cream);

  --pb-brand:         var(--pb-olive);      /* identity / product */
  --pb-brand-ink:     var(--pb-olive-deep); /* olive that passes on cream */
  --pb-outdoor:       var(--pb-alpine);     /* context / freshness */
  --pb-outdoor-ink:   var(--pb-alpine-deep);
  --pb-accent:        var(--pb-pink);       /* disruptive splash ONLY */

  --pb-line:          rgba(17, 17, 17, 0.14);
  --pb-line-strong:   rgba(17, 17, 17, 0.32);

  /* --- Type --------------------------------------------------------------
     DRAFT — §27 lists typography as unresolved. Anton is the closest free
     match to the wordmark's heavy condensed grotesque. Swap here when a real
     license is bought. */
  --pb-font-display: "Anton", "Haettenschweiler", "Arial Narrow", sans-serif;
  --pb-font-body:    "Barlow", -apple-system, "Segoe UI", system-ui, sans-serif;
  --pb-font-data:    "Barlow Condensed", "Arial Narrow", sans-serif;

  --pb-size-hero:    clamp(3.2rem, 8vw, 6.5rem);
  --pb-size-h1:      clamp(2.4rem, 5vw, 4rem);
  --pb-size-h2:      clamp(1.6rem, 3vw, 2.4rem);
  --pb-size-h3:      1.25rem;
  --pb-size-body:    1rem;
  --pb-size-small:   0.875rem;
  --pb-size-micro:   0.75rem;

  --pb-track-display: 0.01em;
  --pb-track-caps:    0.14em;   /* the wide letterspaced caps on pack */
  --pb-leading-tight: 0.92;
  --pb-leading-body:  1.6;

  /* --- Space -------------------------------------------------------------
     Generous by default. §9 and §28 both ask for breathing room. */
  --pb-space-1: 0.25rem;
  --pb-space-2: 0.5rem;
  --pb-space-3: 0.75rem;
  --pb-space-4: 1rem;
  --pb-space-5: 1.5rem;
  --pb-space-6: 2rem;
  --pb-space-7: 3rem;
  --pb-space-8: 4.5rem;
  --pb-space-9: 7rem;

  --pb-measure:    62ch;        /* readable line length */
  --pb-page-max:   1240px;

  /* --- Shape -------------------------------------------------------------
     Near-square. Rounded corners read soft/wellness; this brand is ink. */
  --pb-radius-0: 0;
  --pb-radius-1: 2px;
  --pb-radius-2: 4px;
  --pb-radius-pill: 999px;

  --pb-shadow-1: 0 1px 2px rgba(17,17,17,.06), 0 2px 8px rgba(17,17,17,.05);
  --pb-shadow-2: 0 4px 12px rgba(17,17,17,.08), 0 12px 32px rgba(17,17,17,.08);

  /* --- Texture -----------------------------------------------------------
     §21: expressive in marketing, restrained in UI. Keep these low. */
  --pb-texture-paper: .035;   /* opacity of the paper grain overlay */
  --pb-texture-ink:   .85;    /* opacity of rough brush marks */

  --pb-ease:     cubic-bezier(.2, .7, .3, 1);
  --pb-dur-fast: 120ms;
  --pb-dur:      220ms;
}