:root {
  color-scheme: light;

  
  --aa-violet-50:  #F6F2FF;
  --aa-violet-100: #ECE5FF;
  --aa-violet-200: #D9CCFD;
  --aa-violet-300: #BCA4FB;
  --aa-violet-400: #9A78FF;
  --aa-violet-500: #8458F5;   
  --aa-violet-600: #7A4EF1;   
  --aa-violet-700: #6537E0;   
  --aa-violet-800: #5B36D6;
  --aa-violet-900: #2A1C66;
  --aa-night:      #100B20;   
  --aa-white:      #FFFFFF;
  --aa-studio-green: #4DFF00; 

  
  --aa-bg:            #FFFFFF;
  --aa-bg-alt:        #F6F2FF;   
  --aa-bg-tint:       #ECE5FF;
  --aa-surface:       #FFFFFF;   
  --aa-surface-soft:  #F6F2FF;   
  --aa-line:          #E6DFF6;   
  --aa-line-strong:   #D5CBEF;
  --aa-ink:           #1C1630;   
  --aa-text:          #4B4462;   
  --aa-muted:         #6E6787;   
  --aa-accent:        var(--aa-violet-600);  
  --aa-accent-hover:  var(--aa-violet-700);
  --aa-accent-press:  var(--aa-violet-800);
  --aa-accent-text:   var(--aa-violet-700);  
  --aa-accent-soft:   var(--aa-violet-100);
  --aa-brand:         var(--aa-violet-500);  
  --aa-panel:         var(--aa-violet-600);  
  --aa-on-accent:     #FFFFFF;
  --aa-link:          var(--aa-violet-700);
  --aa-focus:         var(--aa-violet-500);
  --aa-live:          #1E7F55;   
  --aa-demo-bg:       #FDF0DA;   
  --aa-demo-text:     #8F5600;
  --aa-good:          #1E7F55;
  --aa-good-bg:       #E6F4EC;
  --aa-danger:        #B23A32;
  --aa-dot:           132, 88, 245;   
  --aa-logo-tile:     var(--aa-violet-500);
  --aa-logo-glyph:    #FFFFFF;

  
  --aa-font-display: "Bricolage Grotesque", "Figtree", ui-sans-serif, system-ui, sans-serif;
  --aa-font-sans:    "Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --aa-font-mono:    ui-monospace, "SF Mono", Menlo, Consolas, monospace;   
  --aa-weight:        400;   
  --aa-weight-ui:     500;   

  --aa-size-display: clamp(2.75rem, 1.4rem + 5.6vw, 5.375rem);  
  --aa-size-h1:      clamp(2.25rem, 1.4rem + 3.6vw, 3.75rem);   
  --aa-size-h2:      clamp(1.875rem, 1.3rem + 2.5vw, 3.125rem); 
  --aa-size-h3:      clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);  
  --aa-size-lead:    clamp(1.125rem, 1.06rem + 0.3vw, 1.25rem); 
  --aa-size-body:    1.0625rem;  
  --aa-size-small:   0.875rem;   
  --aa-size-label:   0.8125rem;  
  --aa-size-stat:    clamp(3rem, 1.8rem + 4.6vw, 5rem);          

  --aa-leading-tight: 1.0;
  --aa-leading-snug:  1.1;
  --aa-leading-body:  1.6;
  --aa-track-display: -0.025em;
  --aa-track-heading: -0.015em;
  --aa-track-label:   0.08em;

  
  --aa-space-1: 4px;
  --aa-space-2: 8px;
  --aa-space-3: 12px;
  --aa-space-4: 16px;
  --aa-space-5: 24px;
  --aa-space-6: 32px;
  --aa-space-7: 48px;
  --aa-space-8: 64px;
  --aa-space-9: 96px;
  --aa-space-10: 128px;
  --aa-section-y: clamp(56px, 32px + 6vw, 120px);
  --aa-gutter: max(16px, env(safe-area-inset-left, 0px));
  --aa-container: 1180px;
  --aa-measure: 64ch;

  
  --aa-radius-sm: 12px;    
  --aa-radius-md: 20px;    
  --aa-radius-lg: 28px;    
  --aa-radius-pill: 999px; 
  --aa-radius-icon: 22.5%; 
  --aa-border: 1px solid var(--aa-line);

  
  --aa-shadow-sm: 0 1px 2px rgba(28, 22, 48, 0.06);
  --aa-shadow-md: 0 10px 30px -12px rgba(76, 44, 170, 0.22);
  --aa-shadow-lg: 0 30px 80px -30px rgba(76, 44, 170, 0.35);

  
  --aa-ease: cubic-bezier(0.22, 1, 0.36, 1);   
  --aa-dur-fast: 140ms;
  --aa-dur: 260ms;
  --aa-dur-slow: 520ms;

  
  --aa-btn-h: 48px;
  --aa-btn-h-sm: 38px;
  --aa-btn-pad-x: 22px;
  --aa-focus-ring: 0 0 0 2px var(--aa-bg), 0 0 0 4px var(--aa-focus);
}

:root[data-aa-theme="dark"] {
  color-scheme: dark;
  --aa-bg:            #100B20;
  --aa-bg-alt:        #181130;
  --aa-bg-tint:       #221947;
  --aa-surface:       #150F2A;
  --aa-surface-soft:  #181130;
  --aa-line:          #2C2350;
  --aa-line-strong:   #3A2F66;
  --aa-ink:           #F2EFFA;
  --aa-text:          #C7C0DC;
  --aa-muted:         #9C94B6;
  --aa-accent:        #7A4EF1;
  --aa-accent-hover:  #8A63F5;
  --aa-accent-press:  #6537E0;
  --aa-accent-text:   #B49DFF;
  --aa-accent-soft:   #221947;
  --aa-brand:         #9A78FF;
  --aa-panel:         #5B36D6;
  --aa-link:          #B49DFF;
  --aa-focus:         #9A78FF;
  --aa-live:          #4DFF00;
  --aa-demo-bg:       #2A2010;
  --aa-demo-text:     #E8B04F;
  --aa-good:          #52C48E;
  --aa-good-bg:       #12291F;
  --aa-danger:        #F2786E;
  --aa-dot:           154, 120, 255;
  --aa-logo-tile:     #8458F5;
  --aa-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --aa-shadow-md: 0 12px 34px -12px rgba(0, 0, 0, 0.6);
  --aa-shadow-lg: 0 30px 80px -30px rgba(0, 0, 0, 0.75);
}

@media (prefers-reduced-motion: reduce) {
  :root { --aa-dur-fast: 0ms; --aa-dur: 0ms; --aa-dur-slow: 0ms; }
}