/* ============================================================
   Benson's Bees — design tokens v1.0.0 (October 2026)
   "Aptos sun-faded" — coastal California, mid-century bones.
   Source of truth: tokens.json (W3C design tokens spec).
   Rules: muted always · never pure black · two shadows only ·
   terracotta sparingly, hover = terracotta-shadow.
   ============================================================ */
:root{
  /* ---- color: primary ---- */
  --color-primary-terracotta:#C8553D;   /* actions, signage, bold brand */
  --color-primary-aptos-pink:#E5A5A0;   /* signage, packaging, CTA support */
  --color-primary-honey-gold:#E8A53A;   /* mascot body, honey cues, type accent */
  --color-primary-mustard:#D9A441;      /* label backgrounds */

  /* ---- color: neutral ---- */
  --color-neutral-sand-cream:#F2E6CF;   /* primary background, packaging base */
  --color-neutral-off-white:#FAF3E2;    /* high-contrast surface, paper trim */
  --color-neutral-warm-charcoal:#2B2A28;/* type, line work — never pure black */

  /* ---- color: supporting ---- */
  --color-supporting-sage:#8FA68E;          /* foliage and scene green */
  --color-supporting-deep-sage:#3D7A3D;     /* clover leaf shadow tone */
  --color-supporting-coastal-teal:#3D5A6C;  /* surfboards, sea accents */
  --color-supporting-terracotta-shadow:#A04530; /* hover / pressed */
  --color-supporting-clover-leaf-alt:#4A8A4A;   /* mark: alternate leaf */
  --color-supporting-clover-center:#2D5A2D;     /* mark: center knot */

  /* ---- interface aliases ---- */
  --bg:var(--color-neutral-sand-cream);
  --surface:var(--color-neutral-off-white);
  --fg:var(--color-neutral-warm-charcoal);
  --muted:var(--color-supporting-coastal-teal);
  --border:#D3C9B5; /* warm charcoal 14% over sand cream */
  --accent:var(--color-primary-terracotta);
  --accent-pressed:var(--color-supporting-terracotta-shadow);

  /* ---- typography ---- */
  --font-display:"Recoleta","Cormorant Garamond","Playfair Display",Georgia,serif;
  --font-body:"Inter","Söhne",system-ui,-apple-system,"Segoe UI","Helvetica Neue",Arial,sans-serif;
  --font-accent:"Caveat","Patrick Hand","Marker Felt",cursive;
  --size-display-xl:96px;
  --size-display-l:64px;
  --size-heading-m:40px;
  --size-body-l:20px;
  --size-body-m:16px;
  --size-body-s:14px;
  --size-label:12px;
  --tracking-wordmark:0.18em; /* BENSON · BEES · APTOS, all-caps, never below 12px */

  /* ---- spacing: 8pt scale ---- */
  --space-xs:4px;
  --space-s:8px;
  --space-m:16px;
  --space-l:24px;
  --space-xl:40px;
  --space-2xl:64px;
  --space-3xl:96px;

  /* ---- shape ---- */
  --radius:8px;
  --radius-chip:6px;
  --radius-pill:999px;
  --radius-leaf:60% 60% 40% 40%; /* clover motif only */
  --border-width:1px;

  /* ---- shadow: the complete list ---- */
  --shadow-soft:0 6px 12px rgba(43,42,40,.12);
  --shadow-warm:0 12px 24px rgba(200,85,61,.18);

  /* ---- motion ---- */
  --duration-fast:200ms;
  --duration-normal:400ms;
  --duration-slow:700ms;
  --duration-story:6000ms; /* full logo reveal */
  --ease-out-cubic:cubic-bezier(.215,.61,.355,1);   /* reveals */
  --ease-in-back:cubic-bezier(.6,-.28,.735,.045);   /* collapses */
  --ease-in-out-back:cubic-bezier(.68,-.55,.265,1.55); /* the B's rotation */
  --ease-out-bounce:cubic-bezier(.34,1.56,.64,1);   /* the bee's landing */
  --ease-out-elastic:cubic-bezier(.68,-.6,.32,1.6); /* the clover pop */
}