/* ═══════════════════════════════════════════════════════════
   FORTIFY — Shared Design Tokens
   Import this in any page that uses the brand design system.
   ═══════════════════════════════════════════════════════════ */

:root {
  /* Brand Colors */
  --navy:       #0F1B3D;
  --navy-deep:  #070E20;
  --navy-mid:   #162447;
  --plum:       #4A1F4A;
  --plum-dark:  #2E1030;
  --plum-light: rgba(74, 31, 74, 0.2);
  --gold:       #D4AF37;
  --gold-light: #F0C050;
  --gold-glow:  rgba(212, 175, 55, 0.12);
  --cream:      #F5F1E8;
  --white:      #FFFFFF;

  /* Typography */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body:    'Inter', -apple-system, sans-serif;

  /* Type Scale */
  --t-display: clamp(3rem, 7vw, 5.5rem);
  --t-h1:      clamp(2.2rem, 5vw, 3.75rem);
  --t-h2:      clamp(1.75rem, 3.5vw, 2.5rem);
  --t-h3:      clamp(1.25rem, 2vw, 1.6rem);
  --t-lg:      1.125rem;
  --t-body:    1rem;
  --t-sm:      0.875rem;
  --t-xs:      0.75rem;

  /* Spacing */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  16px;
  --sp-4:  24px;
  --sp-5:  40px;
  --sp-6:  64px;
  --sp-7:  96px;
  --sp-8:  144px;

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:  cubic-bezier(0.7, 0, 0.84, 0);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Focus ring — brand gold */
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 4px;
}