/*
 * tokens.css — GOAT Parties
 *
 * GOAT Parties keeps its own louder palette. The colours were measured off
 * the old WordPress site on 2026-10-02, so the rebuild looks the same. It
 * shares the goat mascot and, since 2026-10-02 (James), the fonts with GOAT
 * Online and GOAT Hotel: Fraunces for headings, Inter for everything else.
 * This file is not written by brand/sync.js.
 */

/* ---- Self-hosted fonts. Paths are relative to this file.
        font-display: optional means a slow first visit shows the fallback
        and nothing jumps. Every page preloads these three files, so use
        Fraunces at 700 and Inter at 400 and 600, and nothing in between.

        Inter is the same two files as sites/goat-online. Fraunces is that
        site's file with the weight fixed at 700 (the only weight used here),
        which halves it: 35KB, was 67KB. It still adjusts its shapes to the
        text size, and from 22px up it uses the same letters as GOAT Online
        and GOAT Hotel (the curly &, the leaning n, m and h).

        To remake it: python brand/make-fraunces-700.py. Do not run fonttools
        varLib.instancer on its own; the script says why. A changed font
        needs a new file name here and in every page's preload line, because
        fonts are cached for a year and are not stamped. This is -v2: the
        first file had the plain letters at every size.
        ---- */

@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 700;
  font-display: optional;
  src: url('fonts/fraunces-latin-700-opsz-v2.woff2') format('woff2-variations');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: optional;
  src: url('fonts/inter-latin-400-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: optional;
  src: url('fonts/inter-latin-600-normal.woff2') format('woff2');
}

:root {
  /* ---- Colour ---- */
  --colour-bg: #ffffff;
  --colour-ink: #0f172a;            /* headings on white */
  --colour-text: #454f5e;           /* body text, 8.2:1 on white */
  --colour-plum: #3c2359;           /* feature strip, footer */
  --colour-night: #0d0614;          /* dark sections */
  --colour-night-2: #0b0222;
  --colour-menu: #1a0b3a;           /* sub-menu, mobile menu */
  --colour-lilac: #e3a8ff;          /* buttons, icons, current page */
  --colour-lilac-hover: #edc4ff;
  --colour-on-lilac: #2b0b3f;       /* text on lilac: 9.2:1 (white was 1.9:1) */
  --colour-pale: #f2f0fe;           /* panels */
  --colour-pale-2: #d8d8f5;
  --colour-violet: #c27bf5;         /* accents on night-2, 7.1:1 (was #a226e9, 3.8:1) */
  --colour-line: #cccccc;
  --colour-star: #f0ad4e;
  --colour-white: #ffffff;
  --colour-error: #a4133c;
  /* The pink end was #d7386d: white text on it was 4.49:1, a hair short. */
  --gradient-header: linear-gradient(135deg, #3c2681 0%, #d4356b 100%);

  /* Highlights in the kids' party list. All pass 4.5:1 on --colour-night. */
  --hl-pink: #fa7ac4;
  --hl-gold: #e1b169;
  --hl-green: #57c149;
  --hl-purple: #b14efb;
  --hl-cyan: #15d5eb;
  --hl-yellow: #faee1b;
  --hl-blue: #508ddb;

  /* ---- Type: the GOAT family's fonts (brand/tokens.css). ---- */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', 'Segoe UI', system-ui, sans-serif;
  --weight-display: 700;
  --tracking-display: -0.01em;
  --text-sm: 0.9375rem;
  --text-base: 1.125rem;            /* 18px: the house minimum for body text (was 16px) */
  --text-lead: 1.25rem;
  --text-h3: 1.5rem;
  --text-h2: 1.875rem;
  --text-h1: 2.25rem;
  --text-display: 2.625rem;

  /* ---- Space and shape ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;
  --space-9: 7rem;
  --container: 75rem;               /* 1200px, as before */
  --gutter: 1.25rem;
  --radius-sm: 0.25rem;
  --radius-md: 0.375rem;
  --radius-photo: 1.5rem;
  --radius-pill: 3.125rem;
  --header-height: 5.125rem;        /* 82px */
}