@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500&display=swap');

:root {
  
  --c-bg:          #080808;
  --c-surface:     #111111;
  --c-surface2:    #181818;
  --c-surface3:    #222222;
  --c-border:      rgba(255,255,255,0.07);
  --c-border2:     rgba(255,255,255,0.13);
  --c-accent:      #b8f53d;
  --c-accent-dim:  rgba(184,245,61,0.10);
  --c-accent-glow: rgba(184,245,61,0.22);
  --c-text:        #ede9e3;
  --c-muted:       rgba(247, 244, 239, 0.815);
  --c-muted2:      rgba(237,233,227,0.20);
  --c-danger:      #ff5252;
  --c-success:     #8ab633;
  --c-warning:     #f5a623;

  
  --ff-display: 'Syne', sans-serif;
  --ff-body:    'DM Sans', sans-serif;

  
  --r-xs:   6px;
  --r-sm:   12px;
  --r-md:   18px;
  --r-lg:   28px;
  --r-full: 9999px;

  
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;

  
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.4);
  --shadow-md: 0 8px 32px rgba(0,0,0,0.6);
  --shadow-lg: 0 24px 64px rgba(0,0,0,0.8);

  
  --z-base:           1;
  --z-nav:            10;
  --z-modal:          20;
  --z-toast:          30;
  --z-splash:         40;
  --z-overlay:        100;
  --z-overlay-top:    110;
}