/* ==========================================================================
   UPG design tokens — from UPG Brand Guidelines v1.0 (October 2026, draft)
   Every colour, font, size, space and radius used by the site comes from here.
   ========================================================================== */

/* --- Brand typefaces (self-hosted from Brand/Typography) ------------------- */
/* Cubano Sharp (confirmed): display headlines only. Check the web-font licence before launch. */
@font-face { font-family: "Cubano"; src: url("../fonts/cubano-sharp.otf") format("opentype"); font-weight: 400; font-display: swap; }
/* Poppins: headlines, subheads and body (OFL, free for web) */
@font-face { font-family: "Poppins"; src: url("../fonts/Poppins-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("../fonts/Poppins-Italic.ttf") format("truetype"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("../fonts/Poppins-Medium.ttf") format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("../fonts/Poppins-SemiBold.ttf") format("truetype"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("../fonts/Poppins-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("../fonts/Poppins-ExtraBold.ttf") format("truetype"); font-weight: 800; font-display: swap; }

:root {
  /* --- Brand palette (guidelines p.15) ----------------------------------- */
  --upg-red: #ed1c24;              /* UPG Red: logo, large display type, decorative blocks */
  --upg-black: #231f20;            /* UPG Black */
  --upg-dark-grey: #555555;
  --upg-light-grey: #dddddd;
  --upg-white: #ffffff;
  --upg-mint: #0dffdb;             /* RESERVED: not used for now (limited palette; colour comes from photography) */

  /* --- Roles ---------------------------------------------------------------
     UPG Red with white text measures 4.38:1, just under WCAG AA (4.5:1).
     For buttons, links and red panels carrying body text we use a slightly
     deeper web red (5.1:1). Large Cubano headlines can use --upg-red. */
  --brand-primary: #d9161d;        /* "UPG Red, web" — buttons, links, red panels */
  --brand-primary-dark: #b81117;   /* hover / pressed */
  --brand-primary-tint: #f4f4f4;   /* soft backgrounds: light grey (limited palette) */
  /* Limited palette for now: the "accent" role is UPG Red / UPG Black, no mint */
  --brand-accent: var(--upg-red);
  --brand-accent-dark: #b81117;
  --brand-accent-tint: #f4f4f4;

  /* Audience colours: limited palette for now. Audiences are told apart by label
     text, not colour; stripes and dots use UPG Red. */
  --aud-families: var(--upg-red);
  --aud-families-tint: #f4f4f4;
  --aud-young: var(--upg-red);
  --aud-young-tint: #f4f4f4;
  --aud-adults: var(--upg-red);
  --aud-adults-tint: #f4f4f4;
  --aud-elders: var(--upg-red);
  --aud-elders-tint: #f4f4f4;
  --aud-help: var(--upg-red);
  --aud-help-tint: #f4f4f4;

  /* --- Neutrals ----------------------------------------------------------- */
  --ink: var(--upg-black);
  --ink-muted: var(--upg-dark-grey);   /* 7.5:1 on white */
  --line: var(--upg-light-grey);
  --surface: var(--upg-white);
  --surface-alt: #f4f4f4;              /* light grey bands */
  --surface-dark: var(--upg-black);    /* footer */
  --on-dark: #ffffff;
  --on-dark-muted: #c9c7c7;

  /* Status (availability) — functional colours, kept readable */
  --status-available: var(--upg-black);   /* status is always written in words too */
  --status-limited: var(--brand-primary);
  --status-waiting: var(--upg-dark-grey);

  --focus: var(--upg-black);

  /* --- Typography --------------------------------------------------------- */
  --font-display: "Cubano", "Poppins", system-ui, sans-serif;
  --font-heading: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;

  --text-xs: 0.8125rem;
  --text-sm: 0.9375rem;
  --text-base: 1.0625rem;
  --text-lg: 1.25rem;
  --text-xl: 1.5rem;
  --text-2xl: clamp(1.75rem, 1.4rem + 1.4vw, 2.25rem);
  --text-3xl: clamp(2.5rem, 1.7rem + 3.2vw, 4rem);

  --leading-tight: 1.12;
  --leading-body: 1.65;
  --tracking-headline: -0.015em;   /* guidelines: headline tracking tighter than body */
  --tracking-label: 0.14em;        /* uppercase section labels */

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-heavy: 800;

  /* --- Space, shape, depth ------------------------------------------------ */
  --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;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(35, 31, 32, 0.06), 0 1px 3px rgba(35, 31, 32, 0.08);
  --shadow-md: 0 6px 20px rgba(35, 31, 32, 0.12);

  --container: 1200px;
  --gutter: clamp(1rem, 0.6rem + 2vw, 2rem);
  --tap-target: 48px;
}