/* ============================================
   MOG RESEARCH — BRAND TOKENS
   Single source of truth for the design system
   ============================================ */

:root {
  /* COLORS */
  --bg-primary: #F5F0E8;          /* warm beige, matches labels */
  --bg-warm-white: #FDFAF5;       /* nav, cards */
  --bg-dark: #1A1A18;             /* near-black, matches labels */
  --accent-gold: #C8A96E;         /* gold accent */
  --secondary-brown: #8B7355;     /* secondary text */
  --border-light: #E8E3DA;        /* hairline borders */
  --border-dark: #2A2A28;
  --text-primary: #1A1A18;
  --text-secondary: #8B7355;
  --text-muted: #A89A82;
  --text-on-dark: #FDFAF5;
  --success: #2D6A3E;
  --error: #8B2C2C;

  /* TYPOGRAPHY — Univers 55 Roman across the entire site.
     Native Univers (commercial Linotype/Monotype) renders for users who have
     it installed via Adobe CC etc. Public Sans (free, open-source, designed
     as a Univers-class modernist sans) loads via Google Fonts as the
     guaranteed match for everyone else. Helvetica Neue is the final system
     fallback — visually adjacent. */
  --font-univers: 'Univers LT Std', 'Univers Next Pro', 'Univers Next', Univers, 'Public Sans', 'Helvetica Neue', Helvetica, 'Inter', Arial, sans-serif;
  --font-serif: var(--font-univers);
  --font-sans: var(--font-univers);
  --font-mono: 'SF Mono', Menlo, monospace;

  /* Type scale (modular) */
  --fs-xs: 11px;
  --fs-sm: 13px;
  --fs-base: 15px;
  --fs-md: 17px;
  --fs-lg: 20px;
  --fs-xl: 24px;
  --fs-2xl: 32px;
  --fs-3xl: 48px;
  --fs-4xl: 64px;
  --fs-5xl: 72px;
  --fs-display: 120px;

  /* Spacing scale (8pt) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* Layout */
  --max-width: 1280px;
  --container-padding: 32px;
  --nav-height: 72px;
  --announcement-height: 44px;

  /* Borders */
  --radius-sm: 2px;
  --radius-md: 2px;
  --radius-lg: 4px;
  --border-width: 1px;

  /* Shadows (sparingly used) */
  --shadow-sm: 0 1px 2px rgba(26, 26, 24, 0.04);
  --shadow-md: 0 4px 12px rgba(26, 26, 24, 0.06);
  --shadow-lg: 0 8px 24px rgba(26, 26, 24, 0.08);
  --shadow-nav: 0 1px 8px rgba(26, 26, 24, 0.04);

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast: 150ms;
  --duration-base: 300ms;
  --duration-slow: 600ms;

  /* z-index */
  --z-announcement: 40;
  --z-nav: 50;
  --z-overlay: 90;
  --z-modal: 100;
}

@media (max-width: 768px) {
  :root {
    --container-padding: 20px;
    --fs-5xl: 48px;
    --fs-4xl: 40px;
    --fs-3xl: 36px;
    --fs-2xl: 26px;
    --fs-display: 80px;
  }
}