/* 
  === DESIGN SYSTEM variables.css ===
  Generative Engine Optimization Service Sites
  Color palette: Warm Cream, Amber Orange, Dark Indigo Blue
*/

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Outfit:wght@500;600;700;800&display=swap');

:root {
  /* Color Tokens - Harmony Palette */
  --bg-cream: hsl(38, 44%, 98%);         /* Main cream background #FDFBF7 */
  --bg-cream-soft: hsl(38, 44%, 96%);    /* Slightly darker cream card backs */
  --bg-cream-warm: hsl(38, 100%, 97%);   /* Warm tint cream */
  
  --primary-orange: hsl(20, 92%, 48%);   /* Vibrant amber orange #EA580C */
  --primary-orange-hover: hsl(20, 92%, 42%);
  --primary-orange-light: hsl(20, 92%, 96%); /* Light tint orange for tags/backs */
  
  --primary-blue: hsl(220, 78%, 15%);    /* Premium Dark Indigo #0F172A */
  --primary-blue-hover: hsl(220, 78%, 10%);
  --primary-blue-light: hsl(220, 15%, 96%);
  
  --neutral-dark: hsl(220, 47%, 11%);    /* Title and main text */
  --neutral-body: hsl(220, 20%, 25%);    /* Body text */
  --neutral-muted: hsl(220, 12%, 50%);   /* Subtle borders and metadata */
  --neutral-border: hsl(38, 20%, 88%);   /* Cream borders */
  
  /* Typography Variables */
  --font-headings: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  
  /* Shadow Tokens */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.05), 0 2px 4px -2px rgba(15, 23, 42, 0.05);
  --shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.08), 0 4px 6px -4px rgba(15, 23, 42, 0.08);
  --shadow-premium: 0 20px 25px -5px rgba(234, 88, 12, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.03);
  
  /* Layout Transitions */
  --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-smooth: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  
  /* Border Radii */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-full: 9999px;
  
  /* Max Widths */
  --container-width: 1280px;
  --container-width-text: 720px;
}