:root {
  /* Brand Typography */
  --font-title: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: 'DM Mono', monospace;

  /* Brand Colors - Insightly HSL Palette */
  --color-primary: hsla(247, 100%, 64%, 1); /* Sleek Appcues-like violet #5C45FF */
  --color-primary-light: hsla(247, 100%, 75%, 1);
  --color-primary-dark: hsla(247, 85%, 52%, 1);
  
  --color-secondary: hsla(180, 100%, 42%, 1); /* Vivid Teal */
  --color-accent: hsla(320, 100%, 60%, 1); /* Neon Pink/Magenta for sparkles */
  
  /* Neutral Color Scales (Warm Slates) */
  --color-white: #ffffff;
  --color-bg-light: #faf9ff; /* Soft violet-white tinted background */
  --color-bg-card: #ffffff;
  --color-border-light: #eae7f6;
  --color-grey-light: #f4f3fb;
  --color-text-title: #121124; /* Rich dark-navy slate */
  --color-text-body: #494666; /* Readable soft muted slate */
  --color-text-muted: #8b87a8;
  
  /* Dark Mode Palette (For special sections like AI engine & bottom CTA) */
  --color-dark-bg: #090816;
  --color-dark-bg-card: hsla(247, 40%, 12%, 0.6);
  --color-dark-border: hsla(247, 40%, 20%, 1);
  --color-dark-text-title: #faf9ff;
  --color-dark-text-body: #b8b6cf;
  
  /* Gradients */
  --grad-hero: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
  --grad-dark-mesh: radial-gradient(circle at 80% 20%, hsla(247, 100%, 25%, 0.15) 0%, transparent 50%),
                    radial-gradient(circle at 10% 80%, hsla(320, 100%, 20%, 0.1) 0%, transparent 40%);
  --grad-light-glass: linear-gradient(135deg, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.3) 100%);
  --grad-dark-glass: linear-gradient(135deg, rgba(25, 22, 54, 0.8) 0%, rgba(12, 10, 31, 0.4) 100%);

  /* Spacing (4px grid base) */
  --space-xxs: 0.25rem; /* 4px */
  --space-xs: 0.5rem;  /* 8px */
  --space-sm: 1rem;    /* 16px */
  --space-md: 1.5rem;  /* 24px */
  --space-lg: 2rem;    /* 32px */
  --space-xl: 3rem;    /* 48px */
  --space-xxl: 5rem;   /* 80px */

  /* Structural Details */
  --border-radius-sm: 8px;
  --border-radius-md: 16px;
  --border-radius-lg: 24px;
  --border-radius-full: 9999px;
  
  --shadow-sm: 0 2px 8px rgba(92, 69, 255, 0.04);
  --shadow-md: 0 8px 30px rgba(92, 69, 255, 0.08);
  --shadow-lg: 0 20px 50px rgba(92, 69, 255, 0.12);
  --shadow-glass: 0 8px 32px 0 rgba(31, 38, 135, 0.05);

  /* Animation Timings */
  --transition-fast: 0.15s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-normal: 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-slow: 0.6s cubic-bezier(0.16, 1, 0.3, 1);

  /* Viewports */
  --viewport-max: 1200px;
}