/* ==========================================================================
   nest-kibble / tokens.css — ENTIRE visual identity (contract §7)
   kibblenest.com — "Sıcak premium pet"
   Motion: data-motion="bounce" — back.out landings, sticker wiggle.
   --------------------------------------------------------------------------
   3-layer structure: primitives → semantic overrides → brand physics.
   The friendliest skin in the family: maximum radius (20px), the only
   OVERSHOOTING ease — reveals land with a happy little hop.
   @font-face lives in the skin's font CSS enqueued by functions.php.
   ========================================================================== */

/* ---- 1. Primitives: the warm pantry palette ------------------------------ */
:root {
  --kb-cream:        #FBF3E3;  /* oat cream — page ground                   */
  --kb-cream-raised: #FFF9EE;  /* fresh biscuit — cards                     */
  --kb-cocoa:        #4F3A2D;  /* cocoa — primary text (warm, not black)    */
  --kb-cocoa-soft:   #7C6757;  /* milky cocoa — secondary text              */
  --kb-terracotta:   #C96F4A;  /* terracotta bowl — brand & CTA             */
  --kb-butter:       #E8B450;  /* butter — sunny sparing accent             */
  --kb-leaf:         #8A9B68;  /* garden leaf — wholesome garnish           */
  --kb-crumb:        #EBDFC8;  /* biscuit crumb — hairlines                 */
}

/* ---- 2. Semantic overrides (contract §2) --------------------------------- */
:root {
  --color-bg:       var(--kb-cream);
  --color-surface:  var(--kb-cream-raised);
  --color-ink:      var(--kb-cocoa);
  --color-ink-soft: var(--kb-cocoa-soft);
  --color-brand:    var(--kb-terracotta);
  --color-accent:   var(--kb-butter);
  --color-cta:      var(--kb-terracotta);
  --color-cta-ink:  var(--kb-cream);
  --color-line:     var(--kb-crumb);

  /* Cocoa-warm shadow so cards float like cookies on a tray. */
  --shadow-color: rgb(79 58 45 / 0.12);
}

/* ---- 3. Brand physics -----------------------------------------------------
   bounce: the ONE skin allowed to overshoot — back.out-style landings.
   Derived micro-durations inherit the spring (hover arrows hop too).     */
:root {
  --radius-base: 20px;                               /* pebble-round        */
  --dur-reveal: 600ms;                               /* playful, not hyper  */
  --ease-brand: cubic-bezier(0.34, 1.56, 0.64, 1);   /* back.out overshoot  */

  /* Typography: chunky friendly display grotesque + round legible body. */
  --font-display: "Bricolage Grotesque", "Avenir Next", "Trebuchet MS",
                  system-ui, sans-serif;
  --font-body: "Nunito Sans", "Segoe UI", system-ui, -apple-system,
               "Helvetica Neue", Arial, sans-serif;
}

/* Warm light identity. */
:root {
  color-scheme: light;
}

/* Leaf green garnish — paw prints, badges, illustration fills. */
:root {
  --brand-garnish: var(--kb-leaf);
}

/* ---- 4. Contrast receipts (WCAG, computed — keep updated if palette moves)
   ink      / bg    9.63:1  AAA
   ink-soft / bg    4.84:1  AA
   brand    / bg    3.25:1  — terracotta on cream is LARGE/BOLD text only;
                              inline links keep --color-ink + underline.
   cta-ink  / cta   3.25:1  ⚠ AA-large only. PRODUCTION RULE for this skin:
                              buy buttons render as .c-buy-button--lg (bold,
                              ≥19px) so the label qualifies as large text.
                              Small CTA variants (--sm) should be avoided in
                              kibble templates or get a darker one-off
                              terracotta if ever needed (extend contract
                              first per §0 if so).
   accent   / bg    1.72:1  — butter is decorative ONLY (star fills sit on
                              an ink-mixed base row; numeric value carries
                              the information). Focus rings auto-correct
                              via --focus-ring-color.
   ------------------------------------------------------------------------ */