/* ==========================================================================
   Design tokens - the single source of truth for the Lions visual system.
   Every colour, spacing step, radius and type size used in the theme is
   defined here. Do not hard-code these values elsewhere.
   ========================================================================== */

:root {
  /* --- Brand colours -------------------------------------------------- */
  --color-primary: #0a3dab;        /* Lions blue */
  --color-primary-dark: #082e80;
  --color-primary-light: #3a75c4;
  --color-navy: #0d2240;           /* footer, CTA band */
  --color-navy-700: #112e57;       /* stat tile */
  --color-accent: #f9c910;         /* Lions yellow */
  --color-accent-dark: #e0b400;
  --color-purple: #8b2994;
  --color-purple-dark: #7a2582;
  --color-green: #3f9d5a;
  --color-green-dark: #33834a;

  /* --- Neutral colours ------------------------------------------------ */
  --color-background: #f6f6f6;
  --color-surface: #ffffff;
  --color-surface-muted: #f1f2f4;
  --color-text: #1a1a1a;
  --color-text-inverse: #ffffff;
  --color-muted: #595959;
  --color-border: #d9dbe0;
  --color-border-strong: #b8bcc4;
  --color-overlay: rgb(13 34 64 / 0.55);
  --color-focus: #0a3dab;
  --color-focus-inverse: #f9c910;

  /* --- Semantic aliases ---------------------------------------------- */
  --color-link: var(--color-primary);
  --color-link-hover: var(--color-primary-dark);

  /* --- Typography ----------------------------------------------------- */
  --font-sans: "Helvetica Neue", Helvetica, Arial, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;

  --text-xs: 0.75rem;                                   /* 12px */
  --text-sm: 0.875rem;                                  /* 14px */
  --text-base: 1rem;                                    /* 16px */
  --text-md: 1.125rem;                                  /* 18px */
  --text-lg: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);    /* 20-24px */
  --text-xl: clamp(1.5rem, 1.25rem + 1vw, 2rem);        /* 24-32px */
  --text-2xl: clamp(1.75rem, 1.4rem + 1.4vw, 2.625rem); /* 28-42px  h2 */
  --text-3xl: clamp(2.25rem, 1.6rem + 2.8vw, 3.875rem); /* 36-62px  h1 / hero */
  --text-stat: clamp(2.5rem, 2rem + 2.5vw, 4rem);       /* 40-64px */

  --leading-tight: 1.15;
  --leading-snug: 1.3;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;
  --tracking-wide: 0.08em;
  --tracking-wider: 0.12em;

  /* --- Spacing (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;

  /* Aliases used by sections */
  --section-gap: clamp(var(--space-5), 4vw, var(--space-7));
  --panel-padding-y: clamp(var(--space-6), 5vw, var(--space-8));
  --panel-padding-x: clamp(var(--space-5), 8vw, 7.75rem);

  /* --- Layout --------------------------------------------------------- */
  --container-width: 82.5rem;    /* 1320px */
  --container-narrow: 48rem;     /* 768px  prose */
  --container-padding: clamp(1rem, 3vw, 2rem);
  --header-height: 4.5rem;

  /* --- Shape & motion ------------------------------------------------- */
  --radius-sm: 3px;
  --radius-md: 5px;              /* buttons, as on the reference */
  --radius-lg: 8px;
  --radius-full: 999px;
  --shadow-sm: 0 1px 2px rgb(13 34 64 / 0.08);
  --shadow-md: 0 6px 20px rgb(13 34 64 / 0.12);
  --shadow-lg: 0 16px 40px rgb(13 34 64 / 0.18);
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 1200ms ease-in-out;  /* hero background cross-fade */
  --angle-cut: 4.5rem;           /* horizontal offset of diagonal photo edges */
}

/* Breakpoints are documented here for reference; CSS custom properties can't
   be used inside media queries, so the same values are repeated literally:
   --bp-sm: 40em (640px)  --bp-md: 48em (768px)  --bp-lg: 64em (1024px)  --bp-xl: 80em (1280px) */