/* ============================================
   Design Tokens & CSS Custom Properties
   ============================================ */

:root {
  /* Colors */
  --color-primary: #293029;
  --color-text-primary: #293029;
  --color-text-secondary: #737370;
  --color-background: #ffffff;
  --color-border: #e8e8e8;
  --color-success: #51a368;
  --color-overlay: rgba(255, 255, 255, 0.88);
  --color-wood-light: #d9bd93;
  --color-marker: #dfae27;
  --color-marker-halo: rgba(255, 255, 255, 0.32);
  --color-forest: #56684b;
  --color-beige-light: #dfdcda;
  --shadow-glass: 0 4px 4px rgba(0, 0, 0, 0.08), inset 0 4px 4px rgba(0, 0, 0, 0.08);
  
  /* Typography */
  --font-arimo: 'Arimo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  
  --font-size-12: 0.75rem;
  --font-size-14: 0.875rem;
  --font-size-16: 1rem;
  --font-size-20: 1.25rem;
  --font-size-24: 1.5rem;
  --font-size-32: 2rem;
  --font-size-40: 2.5rem;
  --font-size-48: 3rem;
  --font-size-64: 4rem;
  
  --line-height-tight: 1;
  --line-height-normal: 1.4;
  --line-height-relaxed: 1.6;
  
  /* Spacing */
  --space-4: 0.25rem;
  --space-8: 0.5rem;
  --space-12: 0.75rem;
  --space-16: 1rem;
  --space-24: 1.5rem;
  --space-32: 2rem;
  --space-48: 3rem;
  --space-64: 4rem;
  --space-96: 6rem;
  --space-128: 8rem;
  --space-192: 12rem;
  --space-256: 16rem;

  /* Sizing */
  --size-container-max: 1392px;
  --size-container-padding: 1.5rem;
  
  /* Border Radius */
  --radius-none: 0;
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 1rem;
  --radius-full: 999px;
  
  /* Z-index */
  --z-dropdown: 1000;
  --z-sticky: 1010;
  --z-modal: 2000;
  --z-popover: 2010;
  
  /* Transitions & Animations */
  --transition-fast: 150ms ease-out;
  --transition-base: 300ms ease-out;
  --transition-slow: 500ms ease-out;

  /* Motion: easing curves (see docs/motion-implementation-specification.md §03) */
  --motion-ease-out: cubic-bezier(0, 0, 0.2, 1);
  --motion-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  /* Motion: scroll-reveal system */
  --motion-reveal-duration: 250ms;
  --motion-reveal-distance: 20px;
  --motion-stagger-step: 80ms;
  --motion-stagger-max-delay: 400ms;

  /* Motion: word-by-word intro reveal (.welcome-title) — shorter step
     than section stagger since it runs across ~20 words on page load. */
  --motion-word-duration: 500ms;
  --motion-word-distance: 16px;
  --motion-word-step: 30ms;

  /* Backdrop & Effects */
  --backdrop-blur: blur(12px);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
  
  /* Media Query Breakpoints */
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  --breakpoint-xxl: 1400px;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-fast: 0s;
    --transition-base: 0s;
    --transition-slow: 0s;
    --motion-reveal-duration: 0s;
    --motion-stagger-step: 0s;
    --motion-stagger-max-delay: 0s;
    --motion-word-duration: 0s;
    --motion-word-step: 0s;
  }
}