/* ==================================================================
   THE GREEN ROOM PACT: DESIGN TOKENS
   ------------------------------------------------------------------
   The single source of truth for fonts, colour, type size, spacing
   and shape. site.css only ever uses these variables, never raw values.
   To restyle the site, change a value here and every page follows.

   RULES
   1. Two fonts only. Anton for headings, Barlow for everything else.
   2. The four brand colours (green, yellow, red, teal) are reserved for
      the four commitments and the brand stripe. Everything else
      is neutral: ink, cream, paper, white.
   3. Every gap, padding and margin comes from the spacing scale.
   4. Three heading sizes: display (page titles), h2 (section titles),
      h3 (card titles), plus one larger hero size for the home headline. Headings are Anton, uppercase.
   5. Contrast (WCAG AA, checked):
        ink on cream / paper / white ... 11.6:1+
        body on cream .................. 8.6:1
        muted on cream ................. 6.0:1
        ink on yellow .................. 6.7:1
        white on red-deep .............. 5.6:1
        white on teal-deep ............. 5.0:1
        white on Safe Gigs black ....... 18.8:1
        ink on green ................... 4.4:1 (large text only: the 24px number badge)
      Bright brand colours are fills. Don't set small text in them.
   ================================================================== */

/* ---------- Fonts ---------- */
@font-face{font-family:'Anton';src:url('fonts/Anton-Regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Barlow';src:url('fonts/Barlow-Regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Barlow';src:url('fonts/Barlow-SemiBold.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Barlow';src:url('fonts/Barlow-Bold.woff2') format('woff2');font-weight:700;font-display:swap}

:root{
  /* Font families */
  --font-display: 'Anton', Impact, 'Arial Narrow', sans-serif;
  --font-text:    'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* ---------- Colour: neutrals (for all layout and text) ---------- */
  --ink:    #2C3A10;   /* headings, buttons, borders that matter */
  --body:   #3D4F16;   /* paragraph text */
  --muted:  #56662F;   /* captions, meta, small print */
  --line:   #E6E3B4;   /* hairlines and quiet borders */
  --cream:  #FFFBD0;   /* page background */
  --paper:  #FFFEF2;   /* alternate section background */
  --white:  #FFFFFF;   /* cards */

  /* ---------- Colour: brand (commitments + stripe only) ---------- */
  --green:  #88A63D;   /* 01 is yellow, 02 green, 03 red, 04 teal */
  --yellow: #EBBA1D;
  --red:    #D63927;
  --teal:   #1D97B0;
  --red-deep:  #C2311F; /* white text allowed */
  --teal-deep: #157A8B; /* white text allowed; register section */
  /* pale tints: the background of each commitment card */
  --tint-yellow: #FDF1C4;
  --tint-green:  #EDF3D9;
  --tint-red:    #FBE3DF;
  --tint-teal:   #E3F2F5;

  /* ---------- Colour: Safe Gigs (only on the Going page) ---------- */
  --sg-black:  #121019;
  --sg-card:   #1E1B2E;
  --sg-violet: #5B3FD9;
  --sg-blue:   #3E55D8;
  --sg-lilac:  #B9A8FF;
  --sg-text:   #D7D2F2;

  /* ---------- Type scale ---------- */
  --fs-hero:    clamp(56px, 11vw, 112px);  /* home page headline only */
  --fs-display: clamp(40px, 6.2vw, 88px);  /* page title (h1) */
  --fs-h2:      clamp(30px, 4.2vw, 52px);  /* section title */
  --fs-h3:      clamp(20px, 2vw, 24px);    /* card title */
  --fs-lede:    clamp(18px, 1.6vw, 21px);  /* intro paragraph */
  --fs-body:    17px;
  --fs-small:   14px;
  --fs-label:   13px;                      /* eyebrows, tags (uppercase) */
  --lh-tight:   1.02;
  --lh-body:    1.6;

  /* ---------- Spacing scale (use nothing else) ---------- */
  --s1: 4px;
  --s2: 8px;
  --s3: 16px;
  --s4: 24px;
  --s5: 40px;
  --s6: 64px;
  --s7: 104px;
  --section: var(--s6);   /* vertical padding of every section (phones) */
  --gutter:  20px;        /* side padding on phones */

  /* ---------- Shape and layout ---------- */
  --wrap:    1180px;
  --narrow:  820px;
  --r-sm:    10px;
  --r:       18px;
  --r-pill:  999px;
  --border:  2px solid var(--ink);
  --shadow:  0 14px 32px rgba(44,58,16,.12);
  --ease:    cubic-bezier(.22,.61,.36,1);

  /* ---------- IMRO lockup heights ---------- */
  --imro-header: 34px;
  --imro-feature: 52px;
}
@media (min-width:1000px){
  :root{ --section: var(--s7); --gutter: 40px; --imro-header: 42px; }
}