:root{
  --white:#ffffff;
  --ice:#f4f8ff;
  --ice-2:#eaf2ff;
  --line:#dbe7fb;
  --sky:#5b9bff;
  --azure:#2f6fed;
  --deep:#0a2a66;
  --deep-2:#123a8a;
  --text:#0f1b33;
  --text-soft:#5b6a8c;
  --green:#1f9d6b;
  --overlay:rgba(10,26,51,0.55);
  color-scheme:light;
}

html[data-theme="dark"]{
  --white:#0f1728;
  --ice:#141d33;
  --ice-2:#1a2540;
  --line:#28324d;
  --sky:#5b9bff;
  --azure:#4a86ff;
  --deep:#060c1c;
  --deep-2:#0a1530;
  --text:#e8edf9;
  --text-soft:#8b96b8;
  --green:#33b884;
  --overlay:rgba(2,6,16,0.7);
  color-scheme:dark;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}

button, input, select, textarea{
  font-family:inherit;
  font-size:inherit;
  color:inherit;
}
button, select{
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
}
button{
  border:none;
  background:none;
  cursor:pointer;
  text-decoration:none;
}

body{
  font-family:'Inter', sans-serif;
  color:var(--text);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  transition:background-color .25s ease, color .25s ease;
}

h1,h2,h3,.display{
  font-family:'Zen Kaku Gothic New', sans-serif;
  letter-spacing:-0.01em;
}

a{color:inherit;text-decoration:none;}

.dots{
  background-image:radial-gradient(currentColor 1.4px, transparent 1.6px);
  background-size:14px 14px;
}

/* ---------- THEME TOGGLE ---------- */
.theme-toggle{
  width:38px;height:38px;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line);
  background:var(--white);
  color:var(--text-soft);
  cursor:pointer;
  flex:none;
  transition:background .2s ease, color .2s ease, transform .2s ease;
}
.theme-toggle:hover{ color:var(--azure); transform:translateY(-1px); }
.theme-toggle svg{ width:18px; height:18px; }
.theme-toggle .icon-sun{ display:none; }
html[data-theme="dark"] .theme-toggle .icon-moon{ display:none; }
html[data-theme="dark"] .theme-toggle .icon-sun{ display:block; }

.theme-toggle--nav{
  border-color:rgba(255,255,255,0.35);
  background:rgba(255,255,255,0.08);
  color:#fff;
}
.theme-toggle--nav:hover{ color:#fff; background:rgba(255,255,255,0.18); }