/* === Light theme defaults (unchanged look) === */
:root {
  --color-bg-main: #faf5ff;
  --color-bg-alt: var(--color-bg-main);
  --color-bg-accent: #f0e4ff;
  --color-bg-footer: #f0e4ff;
  --color-bg-tile: #ffffff;
  --color-bg-button: #ffffff;
  --color-avatar-bg: #ffffff;

  --color-text-primary: #4f4f4f;
  --color-text-accent: #8a2be2;
  --color-link-hover: #8a2be2;
  --color-border: #d3b8ef;
  --color-accent-warm: #faae2b;

  --content-max: 1200px;
  --gutter: clamp(16px, 4vw, 40px);

  --tile-ink: #7a7f88;
  --tile-size: 70%;
  --tile-opacity: .50;
  --tile-blur: 1.2px;
  --tile-filter: grayscale(1);

  --veil-rgb: 255, 255, 255;
  --veil-strong: .80;
  --veil-soft: .60;

  --ring-start: #a774ff;
  --ring-end: #ffffff;

  --btn-bg: var(--color-bg-button);
  --btn-border: var(--color-link-hover);
  --btn-text: var(--color-text-primary);

  --ease: 240ms cubic-bezier(.2, .6, .2, 1);
}

/* === Dark theme overrides === */
:root[data-theme="dark"] {
  --color-bg-main: #0e0a13;
  --color-bg-alt: #0e0a13;
  --color-bg-accent: #151024;
  --color-bg-footer: #151024;
  --color-bg-tile: #161223;
  --color-bg-button: #1b1630;
  --color-avatar-bg: #1a1226;

  --color-text-primary: #ded9f0;
  --color-text-accent: #bfa8ff;
  --color-link-hover: #b483ff;
  --color-border: #3a2e5a;
  --color-accent-warm: #ffbf4d;

  --tile-ink: #b7bcd1;
  --tile-opacity: .42;
  --tile-blur: 1px;
  --tile-filter: grayscale(.25) brightness(1.08);

  --veil-rgb: 0, 0, 0;
  --veil-strong: .45;
  --veil-soft: .25;

  --ring-start: #8256ff;
  --ring-end: #1c1730;

  --btn-bg: #1b1630;
  --btn-border: #523c8a;
  --btn-text: #e8e2ff;
}

/* follow system when no explicit data-theme is set */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --color-bg-main: #0e0a13;
    --color-bg-alt: #0e0a13;
    --color-bg-accent: #151024;
    --color-bg-footer: #151024;
    --color-bg-tile: #161223;
    --color-bg-button: #1b1630;
    --color-avatar-bg: #1a1226;

    --color-text-primary: #ded9f0;
    --color-text-accent: #bfa8ff;
    --color-link-hover: #b483ff;
    --color-border: #3a2e5a;
    --color-accent-warm: #ffbf4d;

    --tile-ink: #b7bcd1;
    --tile-opacity: .42;
    --tile-blur: 1px;
    --tile-filter: grayscale(.25) brightness(1.08);

    --veil-rgb: 0, 0, 0;
    --veil-strong: .45;
    --veil-soft: .25;

    --ring-start: #8256ff;
    --ring-end: #1c1730;

    --btn-bg: #1b1630;
    --btn-border: #523c8a;
    --btn-text: #e8e2ff;
  }
}

/* Base */
html {
  scroll-behavior: smooth;
}

body {
  font-family: Inter, system-ui, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  background: var(--color-bg-main);
  color: var(--color-text-primary);
  transition: background-color var(--ease), color var(--ease);
}

/* Layout containers */
.site-width,
.container,
.contact-container,
.footer-container {
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Header / Nav */
header {
  background: var(--color-bg-main);
  border-bottom: 2px solid var(--color-link-hover);
  transition: background-color var(--ease), border-color var(--ease);
}

#navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding-block: 20px;
  font-family: "Fira Code", monospace;
  z-index: 1000;
}

.logo svg {
  height: 40px;
  display: block;
  color: var(--color-text-primary);
  transition: color var(--ease);
}

#navbar a {
  color: var(--color-text-primary);
  text-decoration: none;
  font-size: 1rem;
  position: relative;
  transition: color var(--ease);
}

#navbar ul {
  list-style: none;
  display: flex;
  gap: 30px;
  margin: 0;
  padding: 0;
}

#navbar a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 0%;
  height: 2px;
  background: var(--color-link-hover);
  transition: width .3s ease-in-out;
}

#navbar a:hover::after {
  width: 100%;
}

/* Theme toggle button */
.theme-toggle {
  appearance: none;
  border: 2px solid var(--btn-border);
  background: var(--btn-bg);
  color: var(--btn-text);
  padding: 8px 12px;
  border-radius: 999px;
  cursor: pointer;
  line-height: 1;
  transition: transform var(--ease), background-color var(--ease), color var(--ease), border-color var(--ease);
}

.theme-toggle:hover {
  transform: translateY(-1px);
}

.theme-toggle:active {
  transform: translateY(0);
}

/* Hero */
.hero {
  display: grid;
  place-items: center;
  gap: 14px;
  text-align: center;
  background: var(--color-bg-main);
  padding: 88px var(--gutter) 72px;
  min-height: 90vh;
  transition: background-color var(--ease);
}

.hero h1 {
  color: var(--color-link-hover);
  font-size: clamp(2.6rem, 5vw, 3.4rem);
  margin: 0;
  font-weight: 700;
  letter-spacing: .2px;
  padding-top: 50px;
  transition: color var(--ease);
}

.hero p {
  color: var(--color-text-accent);
  font-size: clamp(1.05rem, 2.1vw, 1.25rem);
  margin: 0;
  max-width: 56ch;
  opacity: .95;
  transition: color var(--ease);
}

.hero-inner {
  max-width: none;
  padding-inline: 0;
  display: grid;
  place-items: center;
  gap: 14px;
  text-align: center;
}

/* Avatar (with overlay) */
.avatar-link {
  display: inline-block;
  text-decoration: none;
  position: relative;
}

.avatar-wrap {
  --ring-thickness: 14px;
  position: relative;
  isolation: isolate;
  /* make z-index stacking self-contained */
  overflow: hidden;
  display: grid;
  place-items: center;
  width: clamp(160px, 22vw, 240px);
  aspect-ratio: 1/1;
  border-radius: 50%;
  background: none;
  box-shadow: 0 12px 28px rgba(138, 43, 226, .12), 0 0 0 1px rgba(138, 43, 226, .18);
}

/* ring */
.avatar-wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--ring-start) 0%, #d9c3ff 45%, var(--ring-end) 100%);
  -webkit-mask: radial-gradient(circle closest-side, transparent calc(100% - var(--ring-thickness)), #000 calc(100% - var(--ring-thickness)));
  mask: radial-gradient(circle closest-side, transparent calc(100% - var(--ring-thickness)), #000 calc(100% - var(--ring-thickness)));
  z-index: 0;
}

/* glow */
.avatar-wrap::after {
  content: "";
  position: absolute;
  inset: -12px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(167, 116, 255, .18), transparent 65%);
  filter: blur(10px);
  pointer-events: none;
  z-index: 0;
}

/* image */
.hero-avatar {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--color-avatar-bg);
  box-shadow: inset 0 2px 10px rgba(0, 0, 0, .06);
  object-fit: cover;
  object-position: 28% center;
  transition: transform .25s var(--ease), filter .25s var(--ease);
}

/* overlay text */
.avatar-overlay-text {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: .4px;
  background-color: rgba(0, 0, 0, .5);
  opacity: 0;
  transition: opacity .25s var(--ease);
  pointer-events: none;
  z-index: 2;
}

/* hover triggers from either the link or the wrap */
.avatar-wrap:hover .avatar-overlay-text,
.avatar-link:hover .avatar-overlay-text,
.avatar-link:focus-visible .avatar-overlay-text {
  opacity: 1;
}

.avatar-wrap:hover .hero-avatar,
.avatar-link:hover .hero-avatar,
.avatar-link:focus-visible .hero-avatar {
  filter: grayscale(.15) brightness(.9);
  transform: scale(1.015);
}

/* Hover (pointer devices) */
@media (pointer: fine) {
  .avatar-wrap:hover {
    transform: translateY(-2px);
    transition: transform .25s ease;
  }
}

/* Projects */
#projects {
  background: var(--color-bg-accent);
  padding: 40px 0;
  transition: background-color var(--ease);
}

#projects h2 {
  text-align: center;
  font-size: 36px;
  margin-bottom: 60px;
  color: var(--color-link-hover);
  transition: color var(--ease);
}

.project-card {
  text-align: center;
  width: 100%;
  max-width: 260px;
}

.project-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 36px;
  padding: 0;
  justify-items: center;
}

.project-tile {
  position: relative;
  display: block;
  width: 100%;
  max-width: 260px;
  aspect-ratio: 1/1;
  margin: 0 auto 12px;
  border: 3px solid var(--color-border);
  border-radius: 13px;
  background: var(--color-bg-tile);
  color: inherit;
  text-decoration: none;
  overflow: hidden;
  transition: transform .25s, box-shadow .25s, border-color var(--ease), background-color var(--ease);
}

.project-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 120% at 30% 20%, rgba(138, 43, 226, .10), transparent 70%), var(--tile-graphic, none);
  background-repeat: no-repeat, no-repeat;
  background-position: center, center;
  background-size: 100% 100%, var(--tile-size);
  opacity: var(--tile-opacity);
  filter: var(--tile-filter) blur(var(--tile-blur)) brightness(.97) saturate(.95);
  transition: filter .25s, transform .25s, opacity .25s;
  z-index: 0;
}

.project-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 55%, rgba(var(--veil-rgb), var(--veil-strong)) 0%, rgba(var(--veil-rgb), var(--veil-soft)) 40%, rgba(var(--veil-rgb), 0) 80%);
  opacity: .9;
  transition: opacity .25s;
  z-index: 0;
}

.tile-label,
.project-image {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--color-text-primary);
  text-shadow: 0 1px 0 rgba(var(--veil-rgb), .35);
  transition: transform .2s, color .2s, text-shadow .2s;
}

.project-cards p {
  color: var(--color-text-accent);
  font-size: 18px;
  margin: 0;
  transition: color var(--ease);
}

.project-tile:hover,
.project-tile:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .20);
  border-color: var(--color-link-hover);
}

.project-tile:hover::before,
.project-tile:focus-visible::before {
  filter: var(--tile-filter) blur(1px) grayscale(.25) brightness(.98);
  transform: scale(1.03);
}

.project-tile:hover::after,
.project-tile:focus-visible::after {
  opacity: .95;
}

.project-tile:hover .tile-label,
.project-tile:focus-visible .tile-label,
.project-tile:hover .project-image,
.project-tile:focus-visible .project-image {
  color: var(--color-link-hover);
  transform: translateY(1px) scale(1.05);
}

/* Contact */
#contact {
  background: var(--color-bg-accent);
  padding-block: 60px;
  transition: background-color var(--ease);
}

.contact-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
}

.contact-text {
  flex: 1;
  max-width: 500px;
}

.contact-text h2 {
  color: var(--color-link-hover);
  font-size: 2.5rem;
  margin-bottom: 16px;
  transition: color var(--ease);
}

.contact-text p {
  color: var(--color-text-accent);
  font-size: 1.2rem;
  margin: 0;
  transition: color var(--ease);
}

.contact-icons {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: flex-start;
}

.contact-icons a {
  color: var(--btn-text);
  text-decoration: none;
  font-size: 1.1rem;
  padding: 12px 20px;
  border: 2px solid var(--btn-border);
  border-radius: 8px;
  background: var(--btn-bg);
  transition: transform .3s, background-color .3s, color .3s, border-color .3s;
  display: block;
  min-width: 120px;
  text-align: center;
}

.contact-icons a:hover {
  background: var(--color-link-hover);
  color: #fff;
  transform: translateY(-2px);
  border-color: var(--color-link-hover);
}

/* Footer */
#footer {
  background: var(--color-bg-footer);
  border-top: 2px solid var(--color-link-hover);
  color: var(--color-text-primary);
  font-family: "Fira Code", monospace;
  padding-block: 20px;
  text-align: center;
  transition: background-color var(--ease), color var(--ease), border-color var(--ease);
}

.footer-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

.footer-links {
  display: flex;
  gap: 20px;
}

.footer-links a {
  color: var(--color-text-primary);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .3s, color .3s;
}

.footer-links a:hover {
  border-bottom: 1px solid var(--color-link-hover);
  color: var(--color-link-hover);
}

/* Decorative tile graphics */
.tile-calc {
  --tile-graphic: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' fill='none' stroke='%23b7bcd1' stroke-width='8'><rect x='20' y='20' width='160' height='160' rx='16'/><line x1='40' y1='60' x2='160' y2='60'/><line x1='40' y1='100' x2='160' y2='100'/><line x1='40' y1='140' x2='160' y2='140'/><circle cx='70' cy='60' r='12' fill='%23b7bcd1' fill-opacity='.6'/><circle cx='110' cy='60' r='12' fill='%23b7bcd1' fill-opacity='.6'/><circle cx='150' cy='60' r='12' fill='%23b7bcd1' fill-opacity='.6'/><circle cx='50' cy='100' r='12' fill='%23b7bcd1' fill-opacity='.6'/><circle cx='90' cy='100' r='12' fill='%23b7bcd1' fill-opacity='.6'/><circle cx='130' cy='100' r='12' fill='%23b7bcd1' fill-opacity='.6'/><circle cx='70' cy='140' r='12' fill='%23b7bcd1' fill-opacity='.6'/><circle cx='110' cy='140' r='12' fill='%23b7bcd1' fill-opacity='.6'/></svg>");
}

.tile-docs {
  --tile-graphic: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' fill='none' stroke='%23b7bcd1' stroke-width='12'><polyline points='80,40 40,100 80,160'/><polyline points='120,40 160,100 120,160'/></svg>");
}

.tile-landing {
  --tile-graphic: url('images/page-svgrepo-com.svg');
}

.tile-rps {
  --tile-graphic: url('images/hand-shake-svgrepo-com.svg');
}

.tile-landing,
.tile-rps {
  --tile-opacity: 0.50;
  --tile-size: 74%;
}

/* About page layout */
.about {
  background: var(--color-bg-main);
  padding: 64px var(--gutter) 80px;
  transition: background-color var(--ease);
}

.page-title {
  color: var(--color-link-hover);
  font-size: clamp(2rem, 4vw, 2.4rem);
  margin: 0 0 20px;
  font-weight: 700;
  letter-spacing: .2px;
  transition: color var(--ease);
}

.prose p {
  font-size: 1.05rem;
  line-height: 1.7;
  margin: 0 0 16px;
  color: var(--color-text-primary);
  transition: color var(--ease);
}

/* Media + Accessibility */
@media (max-width:768px) {
  .contact-container {
    flex-direction: column;
    align-items: flex-start;
  }

  .contact-text {
    text-align: left;
  }

  #navbar ul {
    flex-direction: column;
    gap: 15px;
  }

  .project-cards {
    grid-template-columns: 1fr;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {

  .project-tile,
  .project-tile::before,
  .project-tile::after,
  .tile-label,
  .project-image,
  .avatar-wrap,
  .hero-avatar,
  .avatar-overlay-text {
    transition: none !important;
  }
}