:root {
  
  --yg-violet: #8436FF;        
  --yg-licorice: #080014;      
  --yg-white: #FFFFFF;

  
  --yg-violet-50: #F2EBFB;     
  --yg-violet-100: #EBD9FC;    
  --yg-violet-700: #3F00A3;    
  --yg-violet-900: #1F0052;    

  
  --yg-grey-900: #26222D;      
  --yg-grey-400: #929194;      
  --yg-grey-200: #D2CFD5;      

  
  --yg-violet-hover: #9450FF;  
  --yg-violet-press: #6E25E0;  

  
  --surface-base: var(--yg-licorice);     
  --surface-raised: var(--yg-grey-900);   
  --surface-invert: var(--yg-white);      
  --surface-wash: var(--yg-violet-50);    

  --text-primary: var(--yg-white);        
  --text-strong: var(--yg-white);         
  --text-muted: var(--yg-grey-400);       
  --text-accent: var(--yg-violet);        
  --text-on-light: var(--yg-licorice);    
  --text-on-violet: var(--yg-white);      

  --border-subtle: rgba(255, 255, 255, 0.12);  
  --border-strong: rgba(255, 255, 255, 0.24);
  --border-on-light: var(--yg-grey-200);

  --accent: var(--yg-violet);
  --accent-hover: var(--yg-violet-hover);
  --accent-press: var(--yg-violet-press);

  --focus-ring: var(--yg-violet);
}


:root {
  
  --font-display: 'Power Grotesk', 'DM Sans', system-ui, sans-serif;
  --font-body: 'Area Normal', 'Poppins', system-ui, sans-serif;

  
  --fw-regular: 400;   
  --fw-medium: 500;    
  --fw-black: 900;     
  --fw-body: 400;          
  --fw-body-medium: 500;   
  --fw-body-semibold: 600; 

  
  --type-hero: 5.5rem;      
  --type-display: 4rem;     
  --type-h1: 3rem;          
  --type-h2: 2.25rem;       
  --type-h3: 1.5rem;        
  --type-cta: 1.125rem;     

  
  --type-lead: 1.375rem;    
  --type-body: 1rem;        
  --type-small: 0.875rem;   
  --type-caption: 0.75rem;  

  
  --lh-tight: 0.95;          
  --lh-snug: 1.1;           
  --lh-body: 1.65;           
  --lh-relaxed: 1.8;        

  
  --ls-display: -0.02em;    
  --ls-tight: -0.01em;      
  --ls-normal: 0;           
  --ls-subtitle: 0.22em;    
  --ls-eyebrow: 0.32em;     
}


:root {
  
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;
  --space-11: 160px;

  
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-xl: 32px;
  --radius-pill: 999px;     
  --radius-circle: 50%;     

  
  --border-width: 1px;        
  --border-width-bold: 2px;   

  
  --shadow-sm: 0 1px 2px rgba(8, 0, 20, 0.20);
  --shadow-md: 0 8px 24px rgba(8, 0, 20, 0.28);
  --shadow-lg: 0 24px 64px rgba(8, 0, 20, 0.40);
  --shadow-violet: 0 12px 40px rgba(132, 54, 255, 0.35);  

  
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);     
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);  
  --dur-fast: 140ms;   
  --dur-base: 240ms;   
  --dur-slow: 420ms;   

  
  --container-max: 1200px;
  --container-wide: 1400px;
  --gutter: var(--space-6);
}

@font-face{font-family:'Area Normal';src:url('fonts/AreaNormal-Regular.otf') format('opentype');font-weight:400;font-display:swap}
@font-face{font-family:'Power Grotesk';src:url('fonts/PowerGrotesk-Regular.otf') format('opentype');font-weight:400;font-display:swap}
@font-face{font-family:'Power Grotesk';src:url('fonts/PowerGrotesk-Medium.otf') format('opentype');font-weight:500;font-display:swap}
@font-face{font-family:'Power Grotesk';src:url('fonts/PowerGrotesk-Black.otf') format('opentype');font-weight:900;font-display:swap}