/* ============================================================
   Reykjavik Day Tours — Design Tokens
   Source of truth for color, type, space, radii, shadow.
   Every neutral is tinted toward slate/blue. Never pure #000/#888.
   ============================================================ */

:root {
  color-scheme: light;

  /* Brand */
  --color-primary: #1f2937;
  --color-primary-deep: #16202e;
  --color-accent: #2563eb;
  --color-accent-strong: #1d4ed8;
  --color-accent-deep: #1e40af;
  --color-accent-soft: #e4edfd;
  --color-on-accent: #ffffff;
  --color-btn-light-bg: #ffffff;
  --color-btn-light-fg: #16202e;

  /* Neutrals (slate-tinted) */
  --color-bg: #ffffff;
  --color-surface: #f6f8fb;
  --color-surface-raised: #ffffff;
  --color-border: #e3e8f0;
  --color-text: #1c2534;
  --color-text-muted: #4d5a6e;
  --color-text-faint: #5c6b82;

  /* On dark surfaces */
  --color-on-dark: #f4f7fb;
  --color-on-dark-muted: #bcc7d6;
  --color-footer-bg: #1f2937;
  --color-footer-deep: #18222f;

  /* Typography */
  --font-display: "Space Grotesk", "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Type scale */
  --text-xs: 0.8125rem;
  --text-sm: 0.9375rem;
  --text-md: 1.0625rem;
  --text-lg: 1.25rem;
  --text-xl: clamp(1.5rem, 2.5vw, 1.875rem);
  --text-2xl: clamp(1.9rem, 3.6vw, 2.5rem);
  --text-3xl: clamp(2.35rem, 5.5vw, 3.5rem);

  /* Spacing */
  --space-0: 0.25rem;
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 2rem;
  --space-4: 4rem;
  --space-5: 6.5rem;

  /* Shape & depth */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(23, 32, 51, 0.06), 0 2px 8px rgba(23, 32, 51, 0.07);
  --shadow-md: 0 4px 12px rgba(23, 32, 51, 0.08), 0 14px 34px rgba(23, 32, 51, 0.11);

  /* Layout & motion */
  --max-width: 1080px;
  --transition: 180ms ease;
}