/*
 * ============================================================
 *  brew&good. — DESIGN TOKENS
 *  css/tokens.css
 * ============================================================
 *
 *  SINGLE SOURCE OF TRUTH for colour, type, spacing.
 *  Extracted verbatim from brew-good-design-system-v2.html
 *  (the :root block + the §07 spacing scale, which the design
 *  system documents but does not declare as variables).
 *
 *  Every colour, font, spacing and radius value in base.css
 *  references a token here. No hardcoded hex, no magic numbers.
 *  Change a value here and it propagates site-wide.
 * ============================================================
 */

:root {

  /* ── Colour ─────────────────────────────────────────────
     The eight brand colours + two divider alphas.
     Verbatim from the design-system :root.               */
  --cream:       #FAF1E0;
  --cream-deep:  #F4E9D2;
  --cobalt:      #2A4FB8;
  --cobalt-deep: #1F3A8A;
  --midnight:    #1A2336;
  --yellow:      #F5C95C;
  --sage:        #B5C4AB;
  --coral:       #E8794D;

  --line:     rgba(26, 35, 54, 0.12);
  --line-inv: rgba(250, 241, 224, 0.18);

  /* Form-field alphas on dark/cobalt (design-system input) */
  --input-bg:          rgba(250, 241, 224, 0.08);
  --input-placeholder: rgba(250, 241, 224, 0.50);

  /* ── Typography ─────────────────────────────────────────
     Verbatim from the design-system :root.               */
  --font-display: "Funnel Display", -apple-system, sans-serif;
  --font-body:    "Funnel Sans", -apple-system, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, monospace;

  /* ── Spacing (base-4/8 rhythm) ──────────────────────────
     From §07 of the design system. Materialised here as the
     variables the guardrails require.                     */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  40px;
  --space-8:  48px;
  --space-9:  64px;
  --space-10: 80px;
  --space-11: 112px;
  --space-12: 128px;

  /* ── Border radii ───────────────────────────────────────*/
  --radius-sm:    4px;   /* inputs                        */
  --radius-md:    6px;   /* cards, quote blocks           */
  --radius-lg:    8px;   /* swatches, image thumbs        */
  --radius-image: 12px;  /* hero image (mobile), photos   */
  --radius-full:  999px; /* pills                         */

  /* ── Layout ─────────────────────────────────────────────*/
  --container-max:     1200px; /* design-system .container */
  --container-pad:     48px;   /* overridden at breakpoints */
  --container-pad-sm:  24px;
}