:root{
  /* Semantic color tokens */
  --bg: #0f1724;
  --surface: #0b1220; /* card / surface */
  --text: #e6eef6;
  --muted: #9aa4b2;
  --primary: #60a5fa; /* primary accent */
  --accent: #6ee7b7;  /* secondary accent */
  --glass: rgba(255,255,255,0.03);

  /* Layout & geometry */
  --radius: 12px;
  --container: 1100px;
  --gap: 24px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;

  /* Type scale */
  --type-base: 16px;
  --type-scale: 1.125;
  --type-rhythm: 1.45;

  /* Accessibility */
  --focus-ring: 3px;
  --focus-color: rgba(96,165,250,0.26);
  --touch-target: 44px;
}

*{box-sizing:border-box}
html,body{height:100%}
html{font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, system-ui; font-size:var(--type-base)}
body{
  margin:0;
  background:linear-gradient(180deg,#071022 0%, var(--bg) 60%);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:var(--type-rhythm);
}

.container{max-width:var(--container);margin:0 auto;padding:0 20px}

.site-header{background:transparent;padding:20px 0;position:sticky;top:0;z-index:50}
.header-inner{display:flex;align-items:center;justify-content:space-between}
.logo{font-weight:700;color:var(--text);text-decoration:none;font-size:1.05rem}
.nav a{color:var(--muted);margin-left:18px;text-decoration:none;display:inline-flex;align-items:center;padding:8px 10px;min-height:var(--touch-target)}
.nav a:hover{color:var(--text)}

/* Focus styles */
.nav a:focus-visible, .btn:focus-visible, .link:focus-visible{
  outline: none;
  box-shadow: 0 0 0 var(--focus-ring) var(--focus-color);
  border-radius: 8px;
}

.hero{padding:56px 0}
.hero-inner{display:grid;grid-template-columns:1fr 320px;gap:32px;align-items:center}
.hero-title{font-size:2.2rem;margin:0 0 10px}
.hero-sub{margin:0 0 18px;color:var(--muted);max-width:60ch}
.hero-cta .btn{margin-right:12px}

.skill-list{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:10px}
.skill{background:var(--glass);padding:8px 12px;border-radius:999px;color:var(--text);font-weight:600;font-size:0.85rem}

.section{padding:48px 0}
.section-title{font-size:1.25rem;margin:0 0 18px}

.grid{display:grid;gap:var(--gap)}
.skills-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.projects-grid{grid-template-columns:repeat(3,minmax(0,1fr))}

.card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));padding:20px;border-radius:var(--radius);box-shadow:0 6px 20px rgba(2,6,23,0.5);border:1px solid rgba(255,255,255,0.03)}
.card h3{margin:0 0 8px}
.card p{margin:0 0 12px;color:var(--muted)}
.project .meta{font-size:0.85rem;color:var(--muted)}
.project .link{color:var(--accent-2);text-decoration:none;font-weight:600}

.btn{display:inline-flex;align-items:center;justify-content:center;padding:10px 14px;border-radius:10px;background:transparent;color:var(--text);border:1px solid rgba(255,255,255,0.06);text-decoration:none;min-height:var(--touch-target)}
.btn.primary{background:linear-gradient(90deg,var(--accent),var(--primary));color:#041223;border:none}

/* subtle interaction */
.btn:not(:disabled){transition:transform 160ms ease, box-shadow 160ms ease}
.btn:active{transform:scale(0.99)}

.site-footer{padding:28px 0;color:var(--muted);border-top:1px solid rgba(255,255,255,0.02)}

/* Responsive */
@media (max-width:980px){
  .hero-inner{grid-template-columns:1fr 1fr}
  .projects-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .skills-grid{grid-template-columns:1fr}
}
@media (max-width:640px){
  .hero-inner{grid-template-columns:1fr;gap:18px}
  .hero-side{order:2}
  .hero-content{order:1}
  .projects-grid{grid-template-columns:1fr}
  .nav{display:none}
  .hero-title{font-size:1.6rem}
}

/* Utility */
.muted{color:var(--muted)}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce){
  .btn{transition:none!important}
  *{transition-duration:0.01ms!important;animation-duration:0.01ms!important;animation-iteration-count:1!important}
}

/* Light mode support */
@media (prefers-color-scheme: light){
  :root{--bg:#ffffff;--surface:#ffffff;--text:#0b1724;--muted:#5b6770;--glass:rgba(11,17,24,0.02)}
  body{background:linear-gradient(180deg,#ffffff 0%, #f7fafc 60%)}
}