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

:root {
  --bg:           #ffffff;
  --surface:      rgba(250, 249, 247, 0.8);
  --text:         #262f3f;
  --muted:        #999999;
  --subtle:       #777777;
  --border:       rgba(230, 230, 230, 0.8);
  --border-solid: #e6e6e6;
  --hover-bg:     #f5f5f5;
  --accent:       rgba(233, 84, 93, 0.9);
  --accent-lt:    rgba(233, 84, 93, 0.07);
  --radius-sm:    10px;
  --radius-md:    16px;
}

[data-theme="dark"] {
  --bg:           #101629;
  --surface:      rgba(24, 39, 66, 0.8);
  --text:         #f7f8f8;
  --muted:        #b4bbd0;
  --subtle:       rgba(180, 187, 208, 0.75);
  --border:       rgba(41, 65, 87, 0.8);
  --border-solid: #294157;
  --hover-bg:     rgba(41, 65, 87, 0.4);
  --accent:       rgba(229, 72, 122, 0.9);
  --accent-lt:    rgba(229, 72, 122, 0.12);
}

html { font-size: 16px; scroll-behavior: smooth; }

body {
  background: var(--bg); color: var(--text);
  font-family: 'Inter', sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { text-decoration: none; color: inherit; }
img { display: block; max-width: 100%; }

/* PAGE SYSTEM */
.page { display: none; padding-top: 64px; min-height: 100vh; }
.page.active { display: block; }

/* ANIMATIONS */
@keyframes rise {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.page.active .home-content,
.page.active .about-content,
.page.active .proj-detail { animation: rise 0.48s cubic-bezier(0.22,1,0.36,1) both; }