/* Design System Variables - Updated for SAA Hero Page */

:root {
  /* Typography */
  --font-primary: 'Poppins', sans-serif;

  /* Colors - Backgrounds & Gradients */
  --color-bg-dark: #030214;
  --color-bg-darker: #01010a;
  
  /* Brand Accent Glows */
  --color-primary: #7c3aed;       /* Violet */
  --color-secondary: #db2777;     /* Magenta */
  --color-orange: #f97316;        /* Orange */
  
  /* Text Colors */
  --color-text-light: #ffffff;
  --color-text-muted: rgba(255, 255, 255, 0.65);
  --color-text-dark: #000000;
  --color-text-dark-muted: #555555;

  /* Spacing */
  --spacing-xs: 1.5rem;   /* 8px */
  --spacing-sm: 1rem;     /* 16px */
  --spacing-md: 1.5rem;   /* 24px */
  --spacing-lg: 2.5rem;   /* 40px */
  --spacing-xl: 4rem;     /* 64px */
  --spacing-xxl: 6rem;    /* 96px */

  /* Borders & Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-pill: 50px;

  /* Transitions */
  --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  
  /* Max width */
  --max-width: 1440px;

  /* Navbar left alignment offset */
  --nav-left-offset: 150px;
}