/* ============================================
   USYSF Design Tokens
   United States Yogasana Sports Federation Inc.
   ============================================ */

:root {
  /* --- Color palette --- */
  --color-navy-950: #0a1830;
  --color-navy-900: #0d1f3f;
  --color-navy-800: #14284f;
  --color-navy-700: #1c3563;
  --color-red-700: #a80d26;
  --color-red-600: #c8102e;
  --color-red-500: #e0192f;
  --color-white: #ffffff;
  --color-cream: #f6f7fa;
  --color-gray-100: #eef0f4;
  --color-gray-300: #d7dbe4;
  --color-gray-500: #8992a6;
  --color-gray-700: #4a5468;
  --color-ink: #101728;
  --color-gold: #d4a24c;

  /* --- Typography --- */
  --font-display: "Anton", "Arial Narrow", sans-serif;
  --font-heading: "Oswald", "Arial Narrow", sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --fs-hero: clamp(2.75rem, 6vw, 5rem);
  --fs-h1: clamp(2rem, 4vw, 3rem);
  --fs-h2: clamp(1.5rem, 3vw, 2.1rem);
  --fs-h3: 1.15rem;
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-eyebrow: 0.8rem;

  /* --- Spacing scale --- */
  --space-2xs: 0.375rem;
  --space-xs: 0.75rem;
  --space-sm: 1.25rem;
  --space-md: 2rem;
  --space-lg: 3.25rem;
  --space-xl: 5rem;
  --space-2xl: 7rem;

  /* --- Layout --- */
  --container-max: 1280px;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-pill: 999px;

  /* --- Motion --- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 180ms;
  --dur-med: 400ms;

  /* --- Shadow --- */
  --shadow-card: 0 8px 30px -12px rgba(10, 24, 48, 0.25);
  --shadow-lift: 0 20px 45px -18px rgba(10, 24, 48, 0.35);
}

/* ============================================
   Reset
   ============================================ */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
}

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

body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol {
  margin: 0;
}

ul[class], ol[class] { list-style: none; padding: 0; }

img, picture, svg { display: block; max-width: 100%; }

input, button, textarea, select { font: inherit; }

a { color: inherit; text-decoration: none; }

button { cursor: pointer; border: none; background: none; font: inherit; }

body {
  font-family: var(--font-body);
  color: var(--color-ink);
  background: var(--color-white);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

:focus-visible {
  outline: 3px solid var(--color-gold);
  outline-offset: 2px;
}