/* ==========================================================================
   ZIP — Design tokens & font faces
   Source of truth for colours, type, spacing extracted from Figma.
   ========================================================================== */

/* ---- Figtree (self-hosted, variable, GDPR-friendly) ---------------------- */
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 300 900;            /* variable axis */
  font-display: swap;
  src: url('../fonts/figtree/figtree-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url('../fonts/figtree/figtree-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Colours */
  --zip-red: #ce181e;
  --zip-red-dark: #b31419;          /* hover */
  --zip-black: #0a0a0a;
  --zip-text: #1a1a1a;
  --zip-text-muted: #4a4a4a;
  --zip-white: #ffffff;
  --zip-pink: #fdf0f0;              /* light pink page/section bg */
  --zip-grey-100: #f4f4f4;          /* light card / placeholder bg */
  --zip-grey-200: #e4e4e4;
  --zip-border: #e6c9ca;            /* subtle pink-tinted borders on cards */

  /* Typography */
  --zip-font: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;

  /* Fluid type scale (desktop targets from Figma; clamp for responsive) */
  --fs-hero: clamp(2.5rem, 1.2rem + 4vw, 5rem);        /* 80px */
  --fs-h1:   clamp(2.25rem, 1.4rem + 3vw, 4rem);       /* 64px */
  --fs-h2:   clamp(1.75rem, 1.2rem + 2vw, 3rem);       /* 48px */
  --fs-h3:   clamp(1.375rem, 1.1rem + 1vw, 2rem);      /* 32px */
  --fs-lead: clamp(1.125rem, 1rem + 0.5vw, 1.5rem);    /* 24px */
  --fs-body: 1.125rem;                                  /* 18px */
  --fs-small: 1rem;                                     /* 16px */
  --fs-xsmall: 0.875rem;                                /* 14px */

  --lh-tight: 1.1;
  --lh-snug: 1.33;
  --lh-normal: 1.5;

  /* Layout */
  --container: 1440px;             /* content width inside the 1680px frame */
  --container-narrow: 1200px;
  --gutter: 120px;                 /* desktop side padding */

  /* Radii & shadows */
  --radius: 4px;
  --radius-lg: 8px;

  /* Spacing rhythm */
  --space-section: clamp(3.5rem, 2rem + 5vw, 7.5rem);  /* between major sections */

  /* Transitions */
  --t-fast: 0.15s ease;
  --t: 0.25s ease;
}