/* ============================================================
   AXIOM RESEARCH GROUP — Design Tokens
   ============================================================ */
:root {
  /* Colors */
  --navy-deep: #0D2852;
  --navy-mid: #153A66;
  --navy-pale: #EEF1F6;
  --gold-1: #C9A241;
  --gold-2: #EDD06A;
  --paper: #FAF8F3;
  --ink: #16202B;
  --slate: #59677A;
  --line: #DCD8CB;
  --white: #FFFFFF;

  /* Typography */
  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', 'SF Mono', Menlo, monospace;

  --fs-h1: 48px;
  --fs-h2: 36px;
  --fs-h3: 28px;
  --fs-h4: 22px;
  --fs-body: 16px;
  --fs-small: 14px;
  --fs-label: 12px;
  --fs-eyebrow: 11px;

  /* Spacing (8px base) */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 28px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-14: 56px;
  --sp-15: 60px;
  --sp-18: 72px;
  --sp-21: 84px;
  --sp-24: 96px;

  --section-pad: 60px;
  --grid-gap: 60px;
  --card-pad: 32px;
  --container-max: 1200px;

  /* Radius */
  --radius-sm: 6px;
  --radius-xs: 2px;

  /* Shadows */
  --shadow-subtle: 0 2px 8px rgba(13, 40, 82, 0.08);
  --shadow-medium: 0 4px 16px rgba(13, 40, 82, 0.12);
  --shadow-large: 0 8px 24px rgba(13, 40, 82, 0.16);
  --shadow-hover: 0 6px 20px rgba(13, 40, 82, 0.14);

  /* Motion */
  --dur-fast: 0.2s;
  --dur-normal: 0.4s;
  --dur-slow: 0.6s;

  /* Header */
  --header-h: 60px;
}

@media (max-width: 1024px) {
  :root {
    --section-pad: 40px;
    --grid-gap: 40px;
  }
}

@media (max-width: 640px) {
  :root {
    --fs-h1: 32px;
    --fs-h2: 26px;
    --fs-h3: 22px;
    --fs-h4: 18px;
    --fs-body: 15px;
    --fs-small: 13px;
    --fs-label: 11px;
    --fs-eyebrow: 10px;
    --section-pad: 28px;
    --grid-gap: 24px;
    --card-pad: 24px;
  }
}