:root {
  --navy-950: #0B2945;
  --navy-800: #123E66;
  --blue-600: #1E5F91;
  --wood-600: #8B5E3C;
  --wood-800: #67412B;
  --gold-500: #D2A74B;
  --gold-700: #A9781F;
  --ivory-100: #F7F2E8;
  --paper-50: #FFFDF8;
  --sand-200: #E8DDCB;
  --graphite-900: #202A33;
  --muted-700: #5D6872;
  --white: #FFFFFF;

  --color-bg: var(--ivory-100);
  --color-bg-soft: var(--paper-50);
  --color-surface: var(--paper-50);
  --color-surface-strong: var(--white);
  --color-ink: var(--graphite-900);
  --color-muted: var(--muted-700);
  --color-navy: var(--navy-800);
  --color-navy-deep: var(--navy-950);
  --color-blue: var(--blue-600);
  --color-bronze: var(--wood-600);
  --color-bronze-2: var(--wood-800);
  --color-gold: var(--gold-500);
  --color-gold-strong: var(--gold-700);
  --color-line: var(--sand-200);
  --color-line-strong: var(--gold-700);
  --color-focus: var(--blue-600);
  --color-success-bg: var(--paper-50);
  --color-warning-bg: var(--ivory-100);
  --color-danger-bg: var(--ivory-100);

  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --font-serif: Georgia, "Times New Roman", serif;

  --container: 1168px;
  --container-wide: 1320px;
  --readable: 740px;
  --gutter: 20px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 56px;
  --space-10: 72px;
  --space-11: 96px;

  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --shadow-soft: 0 22px 54px rgba(11, 41, 69, 0.14);
  --shadow-card: 0 14px 34px rgba(11, 41, 69, 0.11);

  --ease: 180ms ease;
  --header-height: 74px;
}

@media (min-width: 768px) {
  :root {
    --gutter: 28px;
  }
}