/* ──────────────────────────────────────────────────────────────
   Baya design tokens
   Single source for colour, type, spacing and radius.
   Depth comes from hairlines, borders and tinted panels — no shadows.
   ────────────────────────────────────────────────────────────── */

:root {
  /* ─── Colour ─── */
  --ink:            #2A2622;  /* text, dark buttons */
  --ink-hover:      #413A34;  /* dark button hover */
  --body:           #4C453E;  /* body copy */
  --body-muted:     #655C54;  /* secondary copy */
  --body-muted-2:   #6E645C;  /* secondary copy, lighter */
  --muted:          #7A6F66;  /* meta */
  --muted-2:        #8B8078;  /* eyebrows */
  --muted-3:        #8B7F72;  /* review attribution */
  --faint:          #A0958C;  /* INCI */
  --faint-2:        #A99C91;  /* numerals */
  --accent:         #9A5F57;  /* eyebrows, pull quotes, active rings */
  --accent-hover:   #B67C74;  /* link hover, focus ring */

  --page:           #FAF8F6;  /* desktop ground */
  --surface:        #FFFFFF;  /* cards, white bands */
  --tint:           #F2EBE3;  /* panels, review cards, footer */
  --tint-2:         #F7F2ED;  /* rail tile placeholder */
  --tint-hover:     #F5EFEA;  /* ghost button hover */
  --hairline:       #EFE9E4;  /* dividers, card borders */
  --border:         #E4DCD5;  /* button/chip borders */
  --border-2:       #E9DFD4;
  --rule:           #E6DED6;  /* flanking rules */
  --rule-tint:      #C9B8A2;  /* rules on tinted panels */
  --rule-tint-2:    #DED2C4;
  --image-bg:       #EADFD4;  /* behind loading images */

  --on-dark:        #FAF8F6;
  --selection:      rgba(196, 135, 127, .18);
  --scrim-strong:   rgba(42, 38, 34, .74);

  /* ─── Type ─── */
  --font: 'Hanken Grotesk', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --w-display: 200;
  --w-body: 300;
  --w-medium: 400;
  --w-strong: 600;

  --track-body: -.005em;
  --track-display: -.03em;
  --track-display-tight: -.034em;
  --track-title: -.015em;
  --track-eyebrow: .16em;

  --fs-body: 15.5px;
  --lh-body: 1.78;
  --fs-eyebrow: 9.5px;

  /* ─── Spacing ─── */
  --gutter: 20px;
  /* Widest a text column + sidebar should get before it stops growing.
     Breakpoints (media queries can't read custom properties): 640px tablet,
     900px desktop. */
  --shell-max: 1180px;
  --section-top: clamp(40px, 5vw, 72px);
  --section-bottom: clamp(48px, 6vw, 88px);
  --tap: 44px;
  /* Height of the pinned announce + header, used for anchor offsets. */
  --sticky-h: 96px;
  --anchor-offset: 106px;

  /* ─── Radius ─── */
  --r-thumb: 10px;
  --r-sm: 12px;
  --r-card: 14px;
  --r-md: 16px;
  --r-lg: 18px;
  --r-xl: 20px;
  --r-2xl: 24px;
  --r-pill: 999px;

  /* ─── Motion ─── */
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --ease: cubic-bezier(.4, 0, .2, 1);
}

@media (min-width: 900px) {
  :root {
    --gutter: 44px;
    --fs-body: 17px;
    --lh-body: 1.82;
    --fs-eyebrow: 10.5px;
    --sticky-h: 192px;
    --anchor-offset: 202px;
  }
}