/* ================================================================
       🎨 THEME TOKENS (design variables)
       - Centralized “tokens” for colors, spacing, radii, shadows, etc.
       - Components reference these so the whole theme is easy to tweak.
    ================================================================ */
:root {
  /* Color system */
  --bg: #f6f8fb; /* page background */
  --ink: #0f172a; /* main text color */
  --muted: #64748b; /* secondary text */
  --card: #ffffff; /* card background */
  --line: #e5e7f0; /* hairline borders */
  --accentA: #7c3aed; /* violet accent */
  --accentB: #14b8a6; /* teal accent */

  /* Shape & elevation */
  --radius: 18px; /* large rounded corners */
  --shadow: 0 12px 28px rgba(2, 6, 23, 0.08); /* soft card shadow */

  /* Spacing scale */
  --space-1: 6px;
  --space-2: 10px;
  --space-3: 14px;
  --space-4: 20px;
  --space-5: 28px;
  --space-6: 40px;

  /* Layout */
  --maxw: 1100px; /* readable line length */
}

/* 🌓 Auto dark mode (JS-free): swap tokens if user prefers dark */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b1220;
    --ink: #e5e7eb;
    --muted: #9aa3b2;
    --card: #0f172a;
    --line: #1f2a44;
    --shadow: none; /* reduce glow on dark surfaces */
  }
}
.icon {
  width: 15px;
}
ul li ul li{
    list-style-position: inside;
    margin-right: 10px;
}
.text-center {
  text-align: center;
}
.muted {
  color:var(--muted);
}
img {
  display: block;
  max-width: 100%;
}
a {
  text-decoration: none;
  color:color-mix(in srgb, var(--accentA) 70%, var(--accentB) 30%);
}
a:hover {
  text-decoration: underline;
}
.clean {
  margin: 10px 18px;
}

* , *::before , *::after{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
html {
    -webkit-text-size-adjust: 100%;
}
body {
    font: 16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    scroll-behavior: smooth;
    color:var(--ink);
    background-color: var(--bg);
}

.hero {
  position: relative;
  background: linear-gradient(
      135deg,
      color-mix(in srgb, var(--accentA) 12%, #0000),
      color-mix(in srgb, var(--accentB) 12%, #0000)
    ),
    var(--card);
    border-bottom: 1px solid var(--line);
}
.hero .container {
  max-width: var(--maxw);
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: var(--space-4);
  align-items: center;
  margin: 0 auto;
  padding: var(--space-4) var(--space-5);
}
@media (max-width:720px)
{
  .hero .container {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .avatar {
    margin-inline: auto;
  }
}
.avatar {
  width: 120px;
  height: 120px;
  overflow: hidden;
  border-radius: 50%;
  box-shadow: var(--shadow);
  position: relative;
}
.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.avatar::after {
  content: "";
  position: absolute;
  inset: -4px; /* extend a bit outside */
  border-radius: inherit;
  background: conic-gradient(
    from 180deg,
    var(--accentA),
    var(--accentB),
    var(--accentA)
  );
  -webkit-mask: radial-gradient(circle at center, transparent 58px, #000 59px);
  mask: radial-gradient(circle at center, transparent 58px, #000 59px);
}

.hero .content h1 {
  font-size: clamp(30px ,6vw ,44px);
  line-height: 1.1;
  margin-bottom: 6px;
}
.hero .content p {
  font-size: 18px;
  margin-bottom: 10px;
}
.hero .container .content .hero-nav {
  display: none;
  gap: 10px;
}
@media (max-width :1200px)
{
  .hero .container .content .hero-nav {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
  }
}
  /* transform-origin: top right; */
a.pill {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 999px;
  border: 2px solid var(--line);
  margin-inline: 5px;
  background-color: var(--card);
}

.dotnav {
  position: fixed;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  gap: 10px;
}

@media screen and (max-width:1200px) {
  .dotnav {
    display: none;
  }
}
.dotnav a{
  width: 12px;
  height: 12px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: color-mix(in srgb, var(--muted) 50%, #0000);
  display: block;
}

#about:target ~ .dotnav a[href="#about"],
#skills:target ~ .dotnav a[href="#skills"],
#experience:target ~ .dotnav a[href="#experience"],
#projects:target ~ .dotnav a[href="#projects"],
#education:target ~ .dotnav a[href="#education"] {
  background: linear-gradient(90deg, var(--accentA), var(--accentB));
  outline: 2px solid color-mix(in srgb, var(--accentA) 40%, var(--accentB) 60%);
  outline-offset: 2px;
}


.snap {
  scroll-snap-type:y proximity;
  overflow-y: auto;
  max-height: calc(100svh - 130px);
  background: radial-gradient(
      900px 400px at 110% -50%,
      color-mix(in srgb, var(--accentA) 8%, #0000),
      transparent
    ),
    radial-gradient(
      800px 400px at -10% 120%,
      color-mix(in srgb, var(--accentB) 8%, #0000),
      transparent
    );
}

.snap .section {
  scroll-snap-align: start;
}
.snap .section .card {
  padding: var(--space-5);
  background-color: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.snap .section .card h2{
  margin: 0 0 12px;
  font-size: clamp(22px , 3.5vw , 30px);
}
.snap .section .card p{
  font-size: 18px;
}
.card p {
  padding-bottom: var(--space-4);
}
.skills {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  justify-items: center;
  gap: var(--space-4);
}
.skills .skill .donut{
  margin-bottom: var(--space-3);
}

@media (max-width: 900px) {
  .skills {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 520px) {
  .skills {
    grid-template-columns: 1fr;
  }
}

.donut {
  --size :120px;
  --track : #e5e7f0;
  --val :75;
  width: var(--size);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  margin-inline: auto;
  background: conic-gradient(
    color-mix(in srgb, var(--accentA) 60%, var(--accentB) 40%)
      calc(var(--val) * 1%),
    var(--track) 0
  );
  display: grid;
  place-items: center;
  position: relative;
  /* justify-items: center; */
}
.donut::after {
  content: "";
  width: calc(var(--size) - 24px);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background-color: var(--card);
  border: 1px solid var(--line);
}
.donut > span {
  position: absolute;
  font-weight: 700;
}

details {
  background-color: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 14px 16px;
  margin-bottom: var(--space-4);
  transition: 0.2s all ease-in-out;
}
summary {
  cursor: pointer;
  list-style: none;
  font-weight: 700;
}
summary .item{
  display: grid;
  grid-template-columns: repeat(3,1fr);
}

.item-top {
  font-size: 18px;
  font-weight: 500;
}
summary::-webkit-details-marker {
  display: none;
} /* hide default marker */
details[open] {
  /* visible focus ring when expanded */
  outline: 2px solid color-mix(in srgb, var(--accentA) 30%, var(--accentB) 70%);
  outline-offset: 2px;
}

.projects {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: var(--space-4);
}
@media (max-width: 1000px) {
  .projects {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 620px) {
  .projects {
    grid-template-columns: 1fr;
  }
}
.project {
  border: 2px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-4);
  position: relative;
  background: linear-gradient(
    to bottom right,
    color-mix(in srgb, var(--card) 85%, #fff0),
    color-mix(in srgb, var(--card) 92%, #fff0)
  );
  backdrop-filter: saturate(1.1) blur(6px);
  box-shadow: var(--shadow);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.project:hover , details:hover {
  transform: translateY(-10px);
  box-shadow: 0 16px 30px rgba(2, 6, 23, 0.12);
}
.project h3 {
  margin: 0 0 6px;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  } /* remove smooth scroll */
  .proj,
  .donut {
    transition: none;
  } /* disable animations */
}

/* ================================================================
       🖨️ PRINT — Clean PDF export
    ================================================================ */
@media print {
  .dotnav {
    display: none;
  } /* hide floating nav */
  .snap {
    overflow: visible;
    max-height: none;
  } /* print all sections */
  .proj:hover {
    transform: none;
    box-shadow: none;
  }
  a {
    color: #000;
    text-decoration: none;
  }
  .card {
    box-shadow: none;
  }
}
.section {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: var(--space-6) var(--space-4);
}
/* header {
  background-color: var(--line);
  padding: 28px 20px;
  margin-bottom: 50px;
}

.section {
  background-color: var(--card);
  border-radius: var(--radius);
  border: 1px solid var(--accentB);
  margin-bottom: 50px;
  margin-inline: auto;
  padding: 28px;
  width: 75%;
}
.clean {
  padding-inline: var(--space-6);
} */