/* ===================================
   REFACT DESIGN SYSTEM
   Sophisticated. Technical. Minimal.
   
   QUICK REFERENCE:
   
   📐 GRID SYSTEM (24 columns)
      • Container: 1440px max, 60px padding each side
      • Column width: 60px (at full width)
      • Content area: 22 columns (1320px)
      • Use .grid-24 for precise layouts
      • Use .grid-2, .grid-3, .grid-4 for content grids
   
   🎨 COLORS
      • Primary: #00FF66 (neon green)
      • Background: #000f0d (dark teal)
      • Text hierarchy: --color-text-primary/secondary/muted
   
   📏 SPACING (12px base)
      • --space-4 (12px), --space-8 (24px), --space-12 (36px)
      • --gap-1-col (60px), --gap-2-col (120px), --gap-3-col (180px)
   
   🔤 TYPOGRAPHY
      • Primary font: Inter (sans-serif)
      • Accent font: IBM Plex Mono (for labels/metrics)
      • Scale: Perfect Fourth (1.333 ratio)
   
   🎯 BORDER RADIUS
      • --radius-sm (4px), --radius-md (8px)
      • --radius-lg (16px), --radius-xl (24px)
      • --radius-full (9999px) for pills/circles
   
   📦 CONTENT WIDTHS
      • --width-narrow (16ch), --width-compact (32ch)
      • --width-readable (60ch), --width-prose (65ch), --width-wide (80ch)
   
   =================================== */

/* Core - Foundation */
@import 'core/variables.css';
@import 'core/reset.css';
@import 'core/typography.css';

/* Layout */
@import 'layout/container.css';
@import 'layout/grid.css';

/* Components */
@import 'components/navigation.css';
@import 'components/buttons.css';
@import 'components/sections.css';
@import 'components/hero.css';
@import 'components/cards.css';
@import 'components/social-proof.css';
@import 'components/process.css';
@import 'components/examples.css';
@import 'components/testimonials.css';
@import 'components/faq.css';
@import 'components/contact.css';
@import 'components/carousel.css';
@import 'components/marquee.css';
@import 'components/industry-tabs.css';
@import 'components/footer.css';

/* Utilities */
@import 'utilities/utilities.css';