/* ==========================================================================
   IIRF Design Tokens
   Colour system derived from the official IIRF logo, letterhead and brochure.
   All text/background pairs used in the build meet WCAG AA (4.5:1).
   ========================================================================== */

/* ----- Self-hosted fonts (no external CDN request) ----- */

@font-face {
  font-family: 'Barlow Condensed';
  src: url('../fonts/barlow-condensed-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Barlow Condensed';
  src: url('../fonts/barlow-condensed-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Barlow Condensed';
  src: url('../fonts/barlow-condensed-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-variable.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ----- Brand colour ----- */
  --navy-900: #0a1f4d;
  --navy-800: #0e2a5e;
  --navy-700: #12356e;
  --navy-600: #17418a;
  --navy-500: #1e4fa3;
  --navy-100: #e8eefa;
  --navy-050: #f4f7fd;

  --green-700: #2f7a27;
  --green-600: #3e9b33;
  --green-500: #4bad3d;
  --green-400: #57b947;
  --green-100: #e9f6e7;

  --teal-600: #0d8a71;
  --teal-500: #12a88b;

  --gold-600: #b8891a;
  --gold-500: #d9a521;
  --gold-400: #e8bc4e;

  /* ----- Neutral ----- */
  --ink-900: #0f172a;
  --ink-700: #1e293b;
  --slate-600: #475569;
  --slate-500: #64748b;
  --slate-400: #94a3b8;
  --slate-300: #cbd5e1;
  --slate-200: #e2e8f0;
  --slate-100: #f1f5f9;
  --slate-050: #f8fafc;
  --white: #ffffff;

  /* ----- Semantic ----- */
  --bg-page: var(--white);
  --bg-subtle: var(--slate-050);
  --bg-muted: var(--slate-100);
  --bg-dark: var(--navy-900);
  --bg-dark-alt: var(--navy-800);

  --text-primary: var(--ink-900);
  --text-secondary: var(--slate-600);
  --text-muted: var(--slate-500);
  --text-on-dark: rgba(255, 255, 255, 0.92);
  --text-on-dark-muted: rgba(255, 255, 255, 0.68);

  --border: var(--slate-200);
  --border-strong: var(--slate-300);
  --border-on-dark: rgba(255, 255, 255, 0.14);

  --accent: var(--green-600);
  --accent-hover: var(--green-700);
  --link: var(--navy-500);
  --link-hover: var(--navy-700);

  /* ----- Typography ----- */
  --font-display: 'Barlow Condensed', 'Arial Narrow', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Fluid type scale, 1.125 ratio, 17px baseline */
  --fs-xs: 0.8125rem;   /* 13px */
  --fs-sm: 0.9375rem;   /* 15px */
  --fs-base: 1.0625rem; /* 17px */
  --fs-md: 1.1875rem;   /* 19px */
  --fs-lg: clamp(1.25rem, 0.5vw + 1.1rem, 1.4375rem);
  --fs-xl: clamp(1.5rem, 1vw + 1.25rem, 1.875rem);
  --fs-2xl: clamp(1.875rem, 1.8vw + 1.4rem, 2.5rem);
  --fs-3xl: clamp(2.25rem, 3vw + 1.5rem, 3.5rem);
  --fs-4xl: clamp(2.75rem, 4.5vw + 1.5rem, 4.5rem);

  --lh-tight: 1.1;
  --lh-snug: 1.25;
  --lh-normal: 1.6;
  --lh-relaxed: 1.75;

  --measure: 68ch;

  /* ----- Space (8px base) ----- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 2.5rem;
  --sp-8: 3rem;
  --sp-9: 4rem;
  --sp-10: 5rem;
  --sp-11: 6rem;

  --section-y: clamp(3.5rem, 7vw, 6.5rem);

  /* ----- Layout ----- */
  --container: 1200px;
  --container-narrow: 860px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);

  /* ----- Radius / shadow ----- */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 14px;
  --r-full: 999px;

  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 4px 16px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 12px 32px rgba(10, 31, 77, 0.12);

  --header-h: 76px;

  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur: 220ms;
}