@import url('https://fonts.googleapis.com/css2?family=Mozilla+Headline:wght@200..700&display=swap');

:root {
  --purple-dark: #270B59;
  --purple-title: #270B59;
  --purple: #4B21C4;
  --purple-mid: #5B2FE0;
  --purple-light: #825EF6;
  --purple-asset: #270B59;
  --teal: #33C7CC;
  --green: #009954;
  --green-dark: #00753F;
  --gray-bg: #F6F5FA;
  --surface: #ffffff;
  --border: #E7E3F4;
  --text: #1E1533;
  --text-muted: #665F80;
  --radius-sm: 8px;
  --radius: 16px;
  --radius-lg: 24px;
  --shadow-sm: 0 2px 10px rgba(39,11,89,0.06);
  --shadow: 0 14px 34px rgba(39,11,89,0.14);
  --transition: .3s cubic-bezier(.2,.8,.2,1);
  --maxw: 1200px;
  --nav: #fff;
  --topbar: #E8E6E6;
  --card: #fff;
  --social-icon:#E8E6E6;
  --social-bg:rgb(28, 28, 28);
  --footer:rgb(43, 83, 146);
  --spc-btn:#009954;
}

@media (prefers-color-scheme: dark) {
  :root {
    --purple-title: #fff;
    --purple-asset:#825EF6;
    --purple: #825EF6; 
    --purple-mid: #9D80F8;
    --purple-light: #270B59; 
    --teal: #42D2D7; 
    --green: #00CC70; 
    --green-dark: #00E67E; 
    --gray-bg: #292929; 
    --surface: #170B2E; 
    --border: #2E1A52; 
    --text: #F6F5FA; 
    --text-muted: #A098B6; 
    --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.4);
    --shadow: 0 14px 34px rgba(0, 0, 0, 0.6);
    --nav: #292929cf;
    --topbar: #121212cf;
    --card: #1f1e1e;
    --social-icon:#121212;
  --social-bg:#b4b4b4;
  --footer: #121d2e;
  --spc-btn:#1a5238;
  }
}


* { box-sizing: border-box;   -webkit-tap-highlight-color: transparent;
}
html { 
  scroll-behavior: smooth; 
  font-size: 100%; 
  overflow-x: clip;
}
body {
  margin: 0;
  font-family: 'Poppins', sans-serif;
  color: var(--text);
  background: var(--gray-bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  padding-top: 120px;
  transition: background-color var(--transition), color var(--transition);
}