/* Veloposter Design Tokens */

:root {
  /* ── Color Palette: Primary (blue-gray) ── */
  --vp-color-primary-50: #f4f6f8;
  --vp-color-primary-100: #e3e8ec;
  --vp-color-primary-200: #c7d1da;
  --vp-color-primary-300: #a3b2c0;
  --vp-color-primary-400: #7b8fa2;
  --vp-color-primary-500: #5e7389;
  --vp-color-primary-600: #4a5d71;
  --vp-color-primary-700: #3d4d5e;
  --vp-color-primary-800: #354250;
  --vp-color-primary-900: #2c3644;

  /* ── Color Palette: Neutral ── */
  --vp-color-neutral-50: #fafafa;
  --vp-color-neutral-100: #f2f2f2;
  --vp-color-neutral-200: #e5e5e5;
  --vp-color-neutral-300: #d4d4d4;
  --vp-color-neutral-400: #a3a3a3;
  --vp-color-neutral-500: #737373;
  --vp-color-neutral-600: #525252;
  --vp-color-neutral-700: #404040;
  --vp-color-neutral-800: #2c2c2c;
  --vp-color-neutral-900: #1a1a1a;

  /* ── Semantic Colors ── */
  --vp-color-accent: #b8860b;
  --vp-color-success: #5a7a5a;
  --vp-color-error: #a04040;

  /* ── Typography ── */
  --vp-font-display: 'Oswald', sans-serif;
  --vp-font-body: 'Inter', sans-serif;
  --vp-font-mono: 'JetBrains Mono', monospace;

  /* ── Font Sizes ── */
  --vp-font-size-xs: 0.65rem;
  --vp-font-size-sm: 0.75rem;
  --vp-font-size-md: 0.875rem;
  --vp-font-size-base: 1rem;
  --vp-font-size-lg: 1.125rem;
  --vp-font-size-xl: 1.25rem;
  --vp-font-size-2xl: 1.5rem;
  --vp-font-size-3xl: 1.875rem;
  --vp-font-size-4xl: 2.25rem;
  --vp-font-size-5xl: 3rem;

  /* ── Spacing ── */
  --vp-space-1: 0.25rem;
  --vp-space-2: 0.5rem;
  --vp-space-3: 0.75rem;
  --vp-space-4: 1rem;
  --vp-space-5: 1.25rem;
  --vp-space-6: 1.5rem;
  --vp-space-8: 2rem;
  --vp-space-10: 2.5rem;
  --vp-space-12: 3rem;
  --vp-space-16: 4rem;
  --vp-space-20: 5rem;
  --vp-space-24: 6rem;

  /* ── Border Radii ── */
  --vp-radius-sm: 2px;
  --vp-radius-md: 4px;
  --vp-radius-lg: 8px;
  --vp-radius-full: 9999px;

  /* ── Shadows ── */
  --vp-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
  --vp-shadow-md: 0 2px 8px rgba(0, 0, 0, 0.1);
  --vp-shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.12);

  /* ── Transitions ── */
  --vp-transition-fast: 150ms ease;
  --vp-transition-normal: 250ms ease;
  --vp-transition-slow: 400ms ease;

  /* ── Poster Alias Tokens (Classic theme defaults) ── */
  --vp-poster-bg: #faf8f5;
  --vp-poster-text: #2c2c2c;
  --vp-poster-text-muted: #7a7a7a;
  --vp-poster-title-font: var(--vp-font-display);
  --vp-poster-body-font: var(--vp-font-body);
  --vp-poster-border: 1px solid #e8e4df;
  --vp-poster-padding: var(--vp-space-8);

  /* ── Route ── */
  --vp-route-color: #c0392b;
  --vp-route-width: 2.5;
  --vp-route-opacity: 0.85;

  /* ── Elevation Profile ── */
  --vp-elevation-fill: rgba(192, 57, 43, 0.15);
  --vp-elevation-stroke: #c0392b;
  --vp-elevation-grid: #e8e4df;
  --vp-elevation-label: #7a7a7a;

  /* ── Stats ── */
  --vp-stats-label-color: #7a7a7a;
  --vp-stats-value-color: #2c2c2c;
  --vp-stats-icon-color: #a3b2c0;
  --vp-stats-divider: #e8e4df;

  /* ── Photo Pins ── */
  --vp-pin-bg: #ffffff;
  --vp-pin-border: #e8e4df;
  --vp-pin-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  --vp-pin-size: 40px;

  /* ── Map ── */
  --vp-map-filter: saturate(0.3) brightness(1.05) contrast(0.95);

  /* ── Poster Layout ── */
  --vp-poster-gap: var(--vp-space-4);
  --vp-poster-title-size: var(--vp-font-size-4xl);
  --vp-poster-subtitle-size: var(--vp-font-size-md);
  --vp-poster-map-radius: var(--vp-radius-md);
  --vp-poster-elevation-height: 120px;
}