*{margin:0;padding:0;box-sizing:border-box;}

:root{
  --bg: #0E111A;
  --bg-primary:#0E111A;              /* default to cozy dark */
  --bg-secondary:#111827;
  --text: #E9ECF1;
  --primary: #8B7DFF;
  --text-primary:#E9ECF1;
  --text-secondary:rgba(233,236,241,.82);
  --muted: rgba(233,236,241,.78);
  --text-muted:rgba(233,236,241,.62);
  --border-color:rgba(233,236,241,.12);
  --accent: #F4C95D;
  --accent-color:#F4C95D;           /* warm amber */
  --accent-2:#8B7DFF;               /* cozy violet */
  --accent-hover:#ffb84a;
  --shadow: 0 18px 55px rgba(0,0,0,.45);
  --shadow-light:0 14px 40px rgba(0,0,0,.35);
  --shadow-medium:0 22px 70px rgba(0,0,0,.45);
  --stroke: rgba(233,236,241,.12);
  --card-bg:rgba(255,255,255,.07);
  --card-bg-2:rgba(255,255,255,.05);
  --pill-bg:rgba(255,255,255,.08);
  --surface: rgba(255,255,255,.07);
  --surface2: rgba(255,255,255,.05);
  --radius:22px;
  --radius-sm:14px;
  --transition:all .22s cubic-bezier(.4,0,.2,1);
}

/* Light theme (FULL override — must match the variables you actually use) */
html[data-theme="light"]{
  --bg: #FBF7F0;
  --bg-primary:#FBF7F0;
  --bg-secondary:#F3EEE6;

  --text: #1F2430;
  --text-primary:#1F2430;
  --text-secondary: rgba(31,36,48,.80);
  --muted: rgba(31,36,48,.72);
  --text-muted: rgba(31,36,48,.60);

  --border-color: rgba(31,36,48,.14);
  --stroke: rgba(31,36,48,.12);

  --primary: #6D5BD0;
  --accent: #F4C95D;
  --accent-color:#F4C95D;
  --accent-2:#6D5BD0;
  --accent-hover:#ffb84a;

  --shadow: 0 16px 50px rgba(31,36,48,.12);
  --shadow-light: 0 14px 40px rgba(31,36,48,.10);
  --shadow-medium: 0 22px 70px rgba(31,36,48,.14);

  --card-bg: rgba(255,255,255,.78);
  --card-bg-2: rgba(255,255,255,.62);
  --pill-bg: rgba(255,255,255,.72);
  --surface: rgba(255,255,255,.78);
  --surface2: rgba(255,255,255,.62);
}

/* Light theme background */
html[data-theme="light"] body{
  background:
    radial-gradient(1200px 700px at 10% 5%, rgba(109,91,208,.18), transparent 60%),
    radial-gradient(900px 600px at 90% 0%, rgba(244,201,93,.16), transparent 55%),
    radial-gradient(800px 500px at 30% 90%, rgba(76,189,255,.08), transparent 60%),
    var(--bg-primary);
    background-attachment: fixed; /* 🔥 THIS FIXES THE SHIFT */
    background-repeat: no-repeat;
    background-size: cover;
}

html,body{height:100%;}

body{
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  color:var(--text-primary);
  line-height:1.65;
  font-size:14px;
  transition:var(--transition);

  /* Cozy dark background */
  background:
    radial-gradient(1200px 700px at 10% 5%, rgba(139,125,255,.18), transparent 60%),
    radial-gradient(900px 600px at 90% 0%, rgba(244,201,93,.12), transparent 55%),
    radial-gradient(800px 500px at 30% 90%, rgba(76,189,255,.08), transparent 60%),
    var(--bg-primary);
  background-attachment:fixed;
}

/* Subtle film grain */
body:before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(1200px 700px at 50% 50%, rgba(255,255,255,.03), transparent 60%);
  opacity:.6;
  z-index:-1;
}

.container{
  max-width:640px;
  margin:0 auto;
  padding:2.2rem 1rem;
}

/* Floating toggles */
.button-toggle{
  position:fixed;
  top:1.25rem;
  right:1.25rem;
  width:48px;
  height:48px;
  border-radius:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:var(--transition);

  background:linear-gradient(180deg, var(--card-bg), var(--card-bg-2));
  border:1px solid var(--border-color);
  box-shadow:var(--shadow-light);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  z-index:1000;
}

.button-toggle:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow-medium);
  border-color:rgba(139,125,255,.22);
}

.button-toggle .icon{font-size:20px;transition:var(--transition);}

.lang-toggle{right:5rem;}

.header{
  text-align:center;
  margin-bottom:3rem;
  padding:2rem 0;
}

.avatar{
  width:120px;
  height:120px;
  border-radius:50%;
  background:linear-gradient(135deg, rgba(139,125,255,.95) 0%, rgba(244,201,93,.85) 100%);
  margin:0 auto 1.5rem;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:48px;
  box-shadow:0 22px 70px rgba(0,0,0,.45);
  transition:var(--transition);
}

.avatar:hover{transform:translateY(-2px) scale(1.03);}

.name{
  font-size:2rem;
  font-weight:700;
  margin-bottom:.5rem;
  color:var(--text-primary);
}

.title{
  font-size:1.1rem;
  color:var(--text-secondary);
  margin-bottom:1rem;
}

.location{
  font-size:.9rem;
  color:var(--text-muted);
  margin-bottom:1.5rem;
}

.contact-links{
  display:flex;
  justify-content:center;
  gap:1rem;
  flex-wrap:wrap;
}

.contact-link{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.55rem 1rem;
  text-decoration:none;
  font-size:.86rem;
  border-radius:999px;
  transition:var(--transition);

  background:linear-gradient(180deg, var(--card-bg), var(--card-bg-2));
  border:1px solid var(--border-color);
  color:var(--text-secondary);
  box-shadow:0 10px 28px rgba(0,0,0,.28);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}

.contact-link i{opacity:.9;}

.contact-link:hover{
  transform:translateY(-2px);
  border-color:rgba(244,201,93,.26);
  box-shadow:0 18px 50px rgba(0,0,0,.42);
  color:var(--text-primary);
}

.contact-link:hover i{color:var(--accent-color);}

.section{margin-bottom:3rem;}

.section-title{
  font-size:1.15rem;
  font-weight:650;
  color:var(--text-primary);
  margin-bottom:1.2rem;
  display:flex;
  align-items:center;
  gap:.5rem;
}

/* Cozy glass card */
.card{
  background:linear-gradient(180deg, var(--card-bg), var(--card-bg-2));
  border:1px solid var(--border-color);
  border-radius:var(--radius);
  padding:1.5rem;
  margin-bottom:1rem;
  transition:var(--transition);
  box-shadow:var(--shadow-light);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}

.card:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow-medium);
  border-color:rgba(139,125,255,.20);
}

.card-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:.5rem;}

.card-title{font-size:1rem;font-weight:650;color:var(--text-primary);margin-bottom:.25rem;}

.card-subtitle{font-size:.9rem;color:var(--text-secondary);margin-bottom:.5rem;}

.card-meta{font-size:.82rem;color:var(--text-muted);margin-bottom:.75rem;}

.card-description{font-size:.9rem;color:var(--text-secondary);line-height:1.6;}

.skills-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
  gap:.75rem;
}

.skill-item{
  background:rgba(255,255,255,.05);
  padding:.8rem;
  border-radius:18px;
  text-align:center;
  font-size:.86rem;
  transition:var(--transition);
  border:1px solid rgba(233,236,241,.10);
  cursor:pointer;
  box-shadow:0 10px 24px rgba(0,0,0,.22);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}

.skill-item:hover{
  transform:translateY(-2px);
  border-color:rgba(244,201,93,.22);
  box-shadow:0 18px 46px rgba(0,0,0,.38);
}

.skill-emoji{display:block;font-size:1.5rem;margin-bottom:.25rem;}

.project-links{display:flex;gap:.75rem;margin-top:1rem;flex-wrap:wrap;}

.project-link{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  padding:.35rem .85rem;
  text-decoration:none;
  border-radius:999px;
  font-size:.82rem;
  transition:var(--transition);

  background:rgba(244,201,93,.12);
  border:1px solid rgba(244,201,93,.22);
  color:rgba(233,236,241,.92);
}

.project-link:hover{
  transform:translateY(-1px);
  background:rgba(244,201,93,.16);
  border-color:rgba(244,201,93,.30);
}

.about-text{
  font-size:.92rem;
  color:var(--text-secondary);
  line-height:1.75;
  text-align:justify;
}

.fade-in{opacity:0;transform:translateY(20px);animation:fadeIn .6s ease-out forwards;}

@keyframes fadeIn{to{opacity:1;transform:translateY(0);}}

.stagger-1{animation-delay:.1s;}
.stagger-2{animation-delay:.2s;}
.stagger-3{animation-delay:.3s;}
.stagger-4{animation-delay:.4s;}
.stagger-5{animation-delay:.5s;}

::selection{background:rgba(139,125,255,.28);}

@media (max-width:640px){
  .container{padding:1rem;}
  .name{font-size:1.75rem;}
  .avatar{width:100px;height:100px;font-size:40px;}
  .contact-links{flex-direction:column;align-items:center;}
  .skills-grid{grid-template-columns:repeat(auto-fit,minmax(100px,1fr));}
}

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap");