/* Copied from brand/ by `node brand/sync.js`. Do not edit — edit the original. */
/*
  tokens.css — GOAT family design tokens (v2.0, 2026-09-20)

  SINGLE SOURCE OF TRUTH for colour, type and shape across the GOAT family.
  GOAT Online and GOAT Hotel both use this file. GOAT Parties does not —
  it keeps its own louder palette and shares only the mascot.

  Rule from PROJECT_BRIEF.md: no hard-coded colours outside this file.

  Sites do NOT link this file across folders — a site has to stand on its own
  when it is uploaded to a host. `node brand/sync.js` copies this file, the
  fonts and the site's logos into each site's own assets folder. Edit it here;
  never edit a copy.

  Spacing and layout: this file carries the family numeric scale
  (--space-1 ... --space-9). A site may define its own named scale on top —
  GOAT Hotel does, because its rhythm predates this file — but nothing may
  redefine a colour, a font or a radius.

  Colour  plum + amber, shared with GOAT Hotel ("Plum & Stone")
  Type    Fraunces (display) + Inter (body), self-hosted woff2
  Logo    the family goat mascot — brand/logos/
*/

/* ---- Self-hosted fonts.  Paths are relative to THIS file, so they resolve
        wherever it is copied, as long as fonts/ travels with it. ---- */

@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 100 900;          /* variable: wght 100-900 */
  font-display: optional;
  src: url('fonts/fraunces-latin-opsz-normal.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: 500;
  font-display: optional;
  src: url('fonts/inter-latin-500-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 {
  /* ---- Type ----
     Fraunces carries the opsz axis, so it gains contrast at display sizes and
     stays sturdy small. font-optical-sizing is auto by default; leave it be. */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', 'Segoe UI', system-ui, sans-serif;
  --weight-display: 700;
  --weight-display-light: 600;
  --weight-ui: 600;
  --tracking-display: -0.01em;

  /* Type scale raised 2px at the bottom on 2026-09-20. We sell to people in
     their 50s to 70s and the site has to demonstrate the accessibility it is
     selling: 18px body minimum, and nothing below 14px anywhere. */
  --text-xs: 0.875rem;   /* 14px — the floor. Labels and legal only */
  --text-sm: 1rem;       /* 16px */
  --text-base: 1.125rem; /* 18px — body */
  --text-md: 1.25rem;    /* 20px — lead paragraphs */
  --text-lg: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --text-xl: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  --text-2xl: clamp(2rem, 1.5rem + 2vw, 3rem);
  --text-3xl: clamp(2.5rem, 1.8rem + 3.2vw, 4.25rem);
  --leading-tight: 1.1;
  --leading-snug: 1.3;
  --leading-body: 1.6;

  /* ---- Spacing (rem, 4px base) ---- */
  --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: 4rem;
  --space-9: 6rem;

  /* ---- Layout.  A site may override these. ---- */
  --container: 72rem;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --header-height: 4.5rem;

  /* ---- Shape ---- */
  --radius-sm: 0.5rem;
  --radius-md: 0.875rem;
  --radius-lg: 1.25rem;
  --radius-pill: 999px;
  --border-width: 1px;
  --shadow-card: 0 1px 2px rgba(59, 31, 92, 0.06), 0 10px 28px rgba(59, 31, 92, 0.08);
  --shadow-raised: 0 16px 40px rgba(59, 31, 92, 0.18);

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --duration: 180ms;

  /* ---- Colour: plum + amber ----
     Lead: amber for buttons and the offer, with plum text on it (5.1:1).
     Links and eyebrows use a darker amber that passes 4.5:1 as text.
     Second: plum for headings, inverse sections and the footer; lilac is its
     tint for panels. Ground is warm stone. */
  --colour-bg: #f6f3ee;            /* stone */
  --colour-surface: #ffffff;
  --colour-surface-2: #ece6f2;     /* lilac */
  --colour-ink: #3b1f5c;           /* plum            12.4:1 on stone */
  --colour-ink-light: #52307a;     /* plum, lifted    for hovers and rules */
  --colour-text: #4a3a63;          /*                  9.1:1 */
  --colour-muted: #574a6b;         /*  7.3:1 stone, 6.6:1 lilac. Darkened
                                       from #6a5e7c (4.9:1 on lilac) so no
                                       text on this site reads as light grey */
  --colour-muted-light: #9a93a8;   /* DECORATIVE ONLY — 2.9:1, never as text */
  --colour-line: #ddd5e6;
  --colour-accent: #e08a2e;        /* amber — FILL ONLY, always plum text on it */
  --colour-accent-hover: #ec9a42;
  --colour-accent-text: #9a5710;   /* amber at text size   4.8:1 on stone */
  --colour-accent-light: #f4b266;  /* decorative only */
  --colour-on-accent: #3b1f5c;     /* white on amber is 2.7:1 — never use it */
  --colour-accent-soft: #ece6f2;
  --colour-highlight: #e08a2e;
  --colour-on-highlight: #3b1f5c;
  --colour-secondary: #3b1f5c;
  --colour-hero-panel: #ece6f2;
  --colour-inverse-bg: #3b1f5c;
  --colour-inverse-text: #f6f3ee;
  --colour-inverse-muted: #cbbbdd; /*                  7.6:1 on plum */
  --colour-footer-bg: #2c1745;
  --colour-focus: #3b1f5c;

}