/*
 * GDN design tokens.
 *
 * Per docs/architecture/GDN_Website_PWA_Frontend_Architecture.md
 * section 12 ("Design System"): typography, spacing, radius, and
 * color are centralized here as CSS custom properties rather than
 * repeated per component, so every later phase (categories, merchant
 * cards, product cards, ...) draws from the same palette instead of
 * re-deriving it.
 *
 * Values are read from the approved reference image (dark navy
 * text, warm off-white background, thin warm-gray borders, a small
 * gold accent, serif display headings over a plain sans-serif body).
 */
:root {
  --gdn-color-bg: #faf8f4;
  --gdn-color-surface: #ffffff;
  --gdn-color-surface-muted: #f2f0ea;
  --gdn-color-navy: #12213f;
  --gdn-color-navy-soft: #3c4a66;
  --gdn-color-border: #e4e0d6;
  --gdn-color-gold: #b6924f;

  --gdn-font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --gdn-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --gdn-space-xs: 0.375rem;
  --gdn-space-sm: 0.75rem;
  --gdn-space-md: 1.25rem;
  --gdn-space-lg: 2rem;
  --gdn-space-xl: 3rem;

  --gdn-radius-sm: 8px;
  --gdn-radius-md: 14px;
  --gdn-radius-lg: 22px;

  --gdn-header-height: 56px;
}