:root {
  /* Modern Refined Color Palette */
  --color-primary: #1A202C; /* Deep slate for headings */
  --color-text: #4A5568;    /* Softer slate for body */
  --color-bg: #F8FAFC;      /* Very light cool gray */
  --color-bg-secondary: #EDF2F7;
  
  /* Accents */
  --color-accent: #E53E3E;        /* Vibrant Red */
  --color-accent-dark: #C53030;   /* Deep Red */
  --color-accent-light: #FEB2B2;  /* Soft Red */
  --color-accent-gradient: linear-gradient(135deg, #E53E3E 0%, #DD6B20 100%);
  
  --color-white: #FFFFFF;
  --color-black: #000000;

  /* Typography */
  --font-primary: 'Poppins', sans-serif;
  --font-secondary: 'Roboto', sans-serif;

  /* Font Sizes using Clamp */
  --fs-h1: clamp(2.5rem, 5vw + 1rem, 4.5rem);
  --fs-h2: clamp(2rem, 3vw + 1rem, 3rem);
  --fs-h3: clamp(1.5rem, 2vw + 1rem, 2.25rem);
  --fs-h4: clamp(1.25rem, 1.5vw + 1rem, 1.75rem);
  --fs-body: 1.125rem;
  --fs-small: 0.9rem;

  /* Spacing */
  --spacing-xs: 0.5rem;
  --spacing-sm: 1rem;
  --spacing-md: 2rem;
  --spacing-lg: 4rem;
  --spacing-xl: 6rem;

  /* Glassmorphism Variables */
  --glass-bg: rgba(255, 255, 255, 0.65);
  --glass-border: 1px solid rgba(255, 255, 255, 0.8);
  --glass-shadow: 0 10px 40px rgba(0, 0, 0, 0.04);
  --glass-blur: blur(12px);
  
  /* Soft Shadow */
  --soft-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.01);
  --hover-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

  /* Layout */
  --container-width: 1200px;
  --border-radius: 16px;
  --border-radius-sm: 8px;
  --border-radius-lg: 24px;
  
  /* Animations */
  --transition-speed: 0.3s;
  --transition-slow: 0.5s;
  --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --ease-out: cubic-bezier(0.25, 1, 0.5, 1);
}