/* =====================================================================
   BROTHER BEES - design tokens
   Colours derived from the supplied honey label palette. Values are
   expressed in OKLch; the hex in each comment is the reference swatch.
   Provisional until the label artwork is confirmed (spec section 4).
   ===================================================================== */

:root {
  /* --- Brand palette ------------------------------------------------ */
  --brand:          oklch(50.2% 0.0204 234.7); /* #59666E  muted blue-grey (principal) */
  --brand-900:      oklch(37.5% 0.0175 235);   /* darker blue-grey for hovers on brand   */
  --brand-050:      oklch(94.5% 0.010  235);   /* pale blue-grey wash                    */
  --sage:           oklch(66.1% 0.0426 136);   /* #87997F  muted sage (secondary)         */
  --sage-deep:      oklch(47.0% 0.045  136);   /* sage dark enough for text/icons         */
  --honey:          oklch(70.5% 0.130  80.8);  /* #C9962E  natural honey amber (sparing)  */
  --honey-deep:     oklch(53.0% 0.108  78);    /* honey dark enough for text              */

  /* --- Semantic surface + ink -------------------------------------- */
  --bg:             oklch(96.5% 0.009  83);    /* #F6F3ED  warm off-white page background */
  --surface:        oklch(98.6% 0.006  83);    /* card / raised surface                   */
  --panel:          oklch(93.0% 0.010  83);    /* placeholder photo panel + sunken fills  */
  --panel-line:     oklch(84.0% 0.013  83);    /* panel hairline                          */
  --fg:             oklch(21.3% 0.0066 258);   /* #17191C  near-black text/headings       */
  --muted:          oklch(50.2% 0.0204 234.7); /* secondary text (5.3:1 on --bg)          */
  --border:         oklch(87.0% 0.010  83);    /* fine divider                            */
  --border-strong:  oklch(78.0% 0.012  83);    /* stronger border / input edge            */
  --accent:         var(--sage-deep);          /* single UI accent role                   */
  --focus:          var(--brand);

  /* --- Inverse (blue-grey sections) -------------------------------- */
  --on-brand:       oklch(96.5% 0.009  235);   /* text on blue-grey (5.3:1)               */
  --on-brand-muted: oklch(91.5% 0.010  235);   /* secondary text on blue-grey (4.7:1)     */
  --brand-border:   oklch(60.0% 0.020  235);   /* divider on blue-grey                    */

  /* --- State colours ----------------------------------------------- */
  --ok:             oklch(48.0% 0.070  150);
  --ok-bg:          oklch(95.5% 0.020  150);
  --warn:           oklch(52.0% 0.090   75);
  --warn-bg:        oklch(95.5% 0.030   80);
  --danger:         oklch(48.0% 0.150   25);
  --danger-bg:      oklch(95.5% 0.030   30);
  --soldout:        var(--muted);

  /* --- Type families ----------------------------------------------- */
  --font-display: "Oswald", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Source Sans 3", "Source Sans Pro", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-serif:   "Source Serif 4", "Source Serif Pro", Georgia, "Times New Roman", serif;

  /* --- Type scale (fluid) ------------------------------------------ */
  --fs-display: clamp(2.55rem, 1.4rem + 5.4vw, 4.75rem);
  --fs-h1:      clamp(2.05rem, 1.35rem + 3.1vw, 3.35rem);
  --fs-h2:      clamp(1.65rem, 1.25rem + 1.9vw, 2.5rem);
  --fs-h3:      clamp(1.22rem, 1.08rem + 0.7vw, 1.55rem);
  --fs-lead:    clamp(1.06rem, 1rem + 0.5vw, 1.32rem);
  --fs-body:    1.0625rem;
  --fs-small:   0.9375rem;
  --fs-tiny:    0.8125rem;
  --lh-display: 0.98;
  --lh-h:       1.08;
  --lh-body:    1.68;

  /* --- Spacing ------------------------------------------------------ */
  --s-1: 0.25rem;  --s-2: 0.5rem;   --s-3: 0.75rem;  --s-4: 1rem;
  --s-5: 1.5rem;   --s-6: 2rem;     --s-7: 3rem;     --s-8: 4rem;
  --s-9: 6rem;     --s-10: 8rem;
  --section-y: clamp(3.5rem, 2rem + 6vw, 7rem);
  --gutter:    clamp(1.15rem, 0.5rem + 2.6vw, 2.75rem);
  --measure:   62ch;

  /* --- Radii (restrained; no oversized rounded cards) --------------- */
  --r-sm: 3px;
  --r-md: 5px;
  --r-lg: 8px;
  --r-pill: 999px;

  /* --- Elevation (used sparingly) ---------------------------------- */
  --shadow-sm: 0 1px 2px oklch(21% 0.02 258 / 0.10);
  --shadow-md: 0 10px 30px -12px oklch(21% 0.02 258 / 0.28);
  --shadow-lg: 0 22px 60px -22px oklch(21% 0.02 258 / 0.38);

  /* --- Layout ------------------------------------------------------- */
  --wrap: 1220px;
  --wrap-narrow: 760px;
  --header-h: 68px;
}