/* ==========================================================
   DESIGN TOKENS — 1 in 4 Prostate Cancer Foundation
   ========================================================== */

:root {
  /* ── Brand Colors ──────────────────────────────────────── */
  --navy:           #0B1D3A;
  --navy-dark:      #07132A;
  --navy-mid:       #0F2550;
  --navy-light:     #1A3160;

  --red:            #B10E2E;
  --red-dark:       #8E0B24;
  --red-light:      #D41236;
  --red-subtle:     rgba(177, 14, 46, 0.08);

  /* ── Neutrals ──────────────────────────────────────────── */
  --charcoal:       #1C2531;
  --gray-900:       #111827;
  --gray-700:       #374151;
  --gray-500:       #6B7280;
  --gray-400:       #9CA3AF;
  --gray-200:       #E5E7EB;
  --gray-100:       #F3F4F6;
  --gray-50:        #F9FAFB;
  --off-white:      #F8F6F3;
  --white:          #FFFFFF;

  /* ── Typography ────────────────────────────────────────── */
  --font-head:      'Oswald', 'Arial Narrow', sans-serif;
  --font-body:      'Montserrat', 'Helvetica Neue', sans-serif;

  /* Type scale — Major Third (1.250 ratio) from 16px base    */
  --text-xs:        0.64rem;    /* 10px */
  --text-sm:        0.8rem;     /* 13px */
  --text-base:      1rem;       /* 16px */
  --text-md:        1.125rem;   /* 18px */
  --text-lg:        1.25rem;    /* 20px */
  --text-xl:        1.563rem;   /* 25px */
  --text-2xl:       1.953rem;   /* 31px */
  --text-3xl:       2.441rem;   /* 39px */
  --text-4xl:       3.052rem;   /* 49px */
  --text-5xl:       3.815rem;   /* 61px */
  --text-6xl:       4.768rem;   /* 76px */

  /* ── Spacing — 8pt grid ────────────────────────────────── */
  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:   12px;
  --sp-4:   16px;
  --sp-5:   20px;
  --sp-6:   24px;
  --sp-8:   32px;
  --sp-10:  40px;
  --sp-12:  48px;
  --sp-16:  64px;
  --sp-20:  80px;
  --sp-24:  96px;
  --sp-32:  128px;

  /* ── Layout ─────────────────────────────────────────────── */
  --container:      1200px;
  --container-sm:   760px;
  --container-xs:   560px;
  --gutter:         24px;
  --nav-h:          72px;

  /* ── Border Radius — sharp editorial ────────────────────── */
  --r-sm:   2px;
  --r:      4px;
  --r-md:   6px;
  --r-full: 9999px;

  /* ── Elevation ───────────────────────────────────────────── */
  --shadow-xs:  0 1px 2px rgba(11, 29, 58, 0.06);
  --shadow-sm:  0 2px 6px rgba(11, 29, 58, 0.08);
  --shadow-md:  0 4px 16px rgba(11, 29, 58, 0.10);
  --shadow-lg:  0 8px 32px rgba(11, 29, 58, 0.14);
  --shadow-xl:  0 16px 48px rgba(11, 29, 58, 0.18);
  --shadow-red: 0 6px 20px rgba(177, 14, 46, 0.28);

  /* ── Transitions ─────────────────────────────────────────── */
  --ease:       cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:   cubic-bezier(0, 0, 0.2, 1);
  --ease-in:    cubic-bezier(0.4, 0, 1, 1);
  --dur-fast:   150ms;
  --dur:        220ms;
  --dur-slow:   380ms;
}