/* ============================================================
   chibiboba design tokens — the single source of design decisions.
   Loaded FIRST on every page; everything else (main.css, menu.css,
   motion.css, the page templates, the newsletter) consumes these.
   Colours are contrast-checked: --cb-ink-soft is the AA-safe text
   colour (replaces the old #B48468, which failed AA on cream).
   ============================================================ */

@font-face {
  font-family: 'RixToyStory_Pro';
  src: url('../fonts/RixToyStory_Pro.woff2') format('woff2'),
       url('../fonts/RixToyStory_Pro.otf') format('opentype');
  font-display: swap;
}

:root {
  /* ── colour ── */
  --cb-ink:        #81573F;   /* headings / primary */
  --cb-ink-hover:  #6d4834;   /* primary button hover */
  --cb-ink-deep:   #3D2817;   /* pearls; text on tinted bands */
  --cb-ink-soft:   #8a6248;   /* AA-safe secondary text (5.0:1 on cream) — use for body copy */
  --cb-tan:        #B48468;   /* DECORATIVE only (borders, backgrounds) — never text */
  --cb-tan-light:  #D3B9A8;
  --cb-cream:      #FDF6EF;
  --cb-cream-deep: #F5EAD8;
  --cb-surface:    #FFFCF8;
  --cb-accent:     #D4706A;   /* badges / errors */
  --cb-ok:         #4E8C5A;
  --cb-tea:        #E0B084;
  --cb-tea-hi:     #EDC49C;
  /* category dots + backgrounds (mirror js/menu.js) */
  --cb-cat-specials: #C0455E; --cb-cat-specials-bg: #F7E4E8;
  --cb-cat-fruity:   #F2B84B; --cb-cat-fruity-bg:   #FBF0D8;
  --cb-cat-milk:     #B79BD1; --cb-cat-milk-bg:     #EFE7F6;
  --cb-cat-matcha:   #9DBB8A; --cb-cat-matcha-bg:   #E8F0E0;
  --cb-cat-koffie:   #B98A66; --cb-cat-koffie-bg:   #F0E6DB;
  --cb-cat-sweet:    #E58AA8; --cb-cat-sweet-bg:    #FBE6EE;

  /* ── type ── */
  --cb-font-display: 'RixToyStory_Pro', 'Trebuchet MS', sans-serif;
  --cb-font-body: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --cb-fs-display: clamp(2.5rem, 1.2rem + 6vw, 6.5rem);
  --cb-fs-h1:   clamp(2.25rem, 1.5rem + 4vw, 5rem);
  --cb-fs-h2:   clamp(1.75rem, 1.2rem + 2.5vw, 3rem);
  --cb-fs-h3:   clamp(1.25rem, 1rem + 1.2vw, 1.75rem);
  --cb-fs-lead: clamp(1.125rem, 1rem + 1vw, 1.625rem);
  --cb-fs-body: 1rem;
  --cb-fs-small: .875rem;
  --cb-fs-xs: .8125rem;       /* 13px floor — nothing smaller */

  /* ── space ── */
  --cb-sp-1: 4px;  --cb-sp-2: 8px;  --cb-sp-3: 12px; --cb-sp-4: 16px;
  --cb-sp-5: 24px; --cb-sp-6: 32px; --cb-sp-7: 48px; --cb-sp-8: 64px;
  --cb-sp-section: clamp(48px, 7vw, 96px);

  /* ── radius ── */
  --cb-r-sm: 12px; --cb-r-md: 18px; --cb-r-xl: 28px; --cb-r-blob: 80px; --cb-r-pill: 999px;

  /* ── elevation ── */
  --cb-shadow-1: 0 2px 8px rgba(129,87,63,.10);
  --cb-shadow-2: 0 8px 24px rgba(129,87,63,.14);
  --cb-shadow-3: 0 20px 48px rgba(129,87,63,.18);

  /* ── focus ── */
  --cb-focus-ring: 3px solid var(--cb-ink);
  --cb-focus-offset: 3px;

  /* ── motion ── */
  --cb-ease-out: cubic-bezier(.23,1,.32,1);
  --cb-ease-inout: cubic-bezier(.77,0,.175,1);
  --cb-ease-bounce: cubic-bezier(.34,1.56,.64,1);
  --cb-dur-fast: 160ms;
  --cb-dur-med: 300ms;
  --cb-dur-slow: 550ms;
}

/* ── keyboard focus (F4) ── visible brand ring for keyboard users only;
   mouse/touch clicks stay ringless. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: var(--cb-focus-ring);
  outline-offset: var(--cb-focus-offset);
}
:where(a, button, input, select, textarea, summary, [tabindex]):focus:not(:focus-visible) {
  outline: none;
}