/* ==========================================================================
   RoadTrips — Design Tokens & Variables
   Art-directed editorial travel & road journal styling system
   ========================================================================== */

:root {
  /* Color Palette — Natural Restrained Earth & Editorial Tones */
  --rt-bg: #F4F0E8;
  --rt-surface: #FAF8F3;
  --rt-surface-warm: #EBE5D8;
  --rt-surface-card: #FFFFFF;
  
  --rt-dark: #151714;
  --rt-dark-elevated: #1C1F1B;
  --rt-dark-surface: #252924;
  
  --rt-deep-green: #243126;
  --rt-accent: #B8623B;
  --rt-accent-hover: #9E4F2D;
  --rt-muted-olive: #7A806A;
  
  --rt-text: #171817;
  --rt-text-secondary: #4A4D46;
  --rt-text-muted: #6E706A;
  
  --rt-text-light: #F4F0E8;
  --rt-text-light-secondary: #C8CCC0;
  --rt-text-light-muted: #8F9487;
  
  --rt-border: rgba(23, 24, 23, 0.12);
  --rt-border-subtle: rgba(23, 24, 23, 0.06);
  --rt-border-dark: rgba(244, 240, 232, 0.12);
  --rt-border-dark-subtle: rgba(244, 240, 232, 0.06);

  /* Layout & Containers */
  --rt-container: 1440px;
  --rt-container-pad: clamp(20px, 4vw, 72px);
  --rt-reading-width: 720px;
  --rt-wide-media: 1100px;

  /* Typography Families */
  --rt-font-display: 'DM Serif Display', Georgia, serif;
  --rt-font-body: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --rt-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Fluid Typographic Scale */
  --rt-text-hero: clamp(2.75rem, 6.5vw + 1rem, 5.5rem);
  --rt-text-h1: clamp(2.25rem, 4vw + 0.5rem, 3.75rem);
  --rt-text-h2: clamp(1.75rem, 2.8vw + 0.5rem, 2.75rem);
  --rt-text-h3: clamp(1.35rem, 1.8vw + 0.5rem, 1.85rem);
  --rt-text-h4: clamp(1.1rem, 1.2vw + 0.4rem, 1.35rem);
  --rt-text-lead: clamp(1.1rem, 1vw + 0.3rem, 1.25rem);
  --rt-text-body: 1rem;
  --rt-text-sm: 0.875rem;
  --rt-text-xs: 0.75rem;
  --rt-text-meta: 0.72rem;

  /* Spacing Scale (4, 8, 12, 16, 24, 32, 48, 64, 80, 96, 120, 160) */
  --rt-space-1: 4px;
  --rt-space-2: 8px;
  --rt-space-3: 12px;
  --rt-space-4: 16px;
  --rt-space-5: 24px;
  --rt-space-6: 32px;
  --rt-space-7: 48px;
  --rt-space-8: 64px;
  --rt-space-9: 80px;
  --rt-space-10: 96px;
  --rt-space-11: 120px;
  --rt-space-12: 160px;

  /* Radii */
  --rt-radius-sm: 4px;
  --rt-radius-md: 8px;
  --rt-radius-lg: 12px;
  --rt-radius-pill: 9999px;

  /* Transitions */
  --rt-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --rt-transition-fast: 200ms ease;
  --rt-transition-normal: 350ms var(--rt-ease-out);
  --rt-transition-slow: 600ms var(--rt-ease-out);

  /* Shadows */
  --rt-shadow-sm: 0 2px 8px rgba(21, 23, 20, 0.04);
  --rt-shadow-md: 0 8px 24px rgba(21, 23, 20, 0.08);
  --rt-shadow-lg: 0 16px 40px rgba(21, 23, 20, 0.12);
  --rt-shadow-card: 0 4px 20px rgba(21, 23, 20, 0.06);

  /* Z-Index Hierarchy */
  --rt-z-base: 1;
  --rt-z-sticky: 100;
  --rt-z-header: 500;
  --rt-z-drawer: 900;
  --rt-z-modal: 1000;
  --rt-z-toast: 1100;
}