/* ============================================================
   Khurram Bhutto — Terminal+ portfolio
   Dark (default) + Light theme
   ============================================================ */

:root{
  --bg:#0b0c0d;
  --panel:#111315;
  --ink:#d6d3c4;
  --dim:#6f6c61;
  --faint:#3b3a33;
  --accent:#c8a456;    /* amber */
  --accent2:#7fb37e;   /* soft green */
  --panel-bg:rgba(17,19,21,.55);
  --panel-bg-2:rgba(17,19,21,.72);
  --accent-soft:rgba(200,164,86,.07);
  --accent-border:rgba(200,164,86,.4);
  --accent2-soft:rgba(127,179,126,.07);
  --scanline:rgba(255,255,255,.018);
  --vignette:rgba(0,0,0,.5);
  --cursor-glow:rgba(200,164,86,.7);
  --mono:ui-monospace,"SF Mono","JetBrains Mono","Fira Code",Menlo,Consolas,monospace;
  color-scheme:dark;
}

/* Light theme */
[data-theme="light"]{
  --bg:#f5f1e6;
  --panel:#ffffff;
  --ink:#1c1917;
  --dim:#6b6256;
  --faint:#d9d0bd;
  --accent:#9a4a1e;    /* burnt orange */
  --accent2:#3f7a4a;   /* forest green */
  --panel-bg:rgba(255,255,255,.6);
  --panel-bg-2:rgba(255,255,255,.78);
  --accent-soft:rgba(154,74,30,.06);
  --accent-border:rgba(154,74,30,.4);
  --accent2-soft:rgba(63,122,74,.07);
  --scanline:rgba(0,0,0,.022);
  --vignette:rgba(120,108,80,.16);
  --cursor-glow:rgba(154,74,30,.6);
  color-scheme:light;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--mono);
  font-size:15px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  position:relative;
  overflow-x:hidden;
  transition:background .35s ease,color .35s ease;
}

/* geometric canvas bg */
#geo{
  position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.85;
}
/* scanlines + vignette */
body::before{
  content:"";position:fixed;inset:0;z-index:1;pointer-events:none;
  background:repeating-linear-gradient(0deg,var(--scanline) 0 1px,transparent 1px 3px);
}
body::after{
  content:"";position:fixed;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(ellipse at center,transparent 60%,var(--vignette) 100%);
}
.wrap{max-width:1120px;margin:0 auto;padding:40px 32px 96px;position:relative;z-index:2}

/* status bar */
.bar{
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  font-size:12px;color:var(--dim);
  border-bottom:1px solid var(--faint);padding-bottom:14px;margin-bottom:56px;
}
.bar .l{color:var(--ink)}
.bar .dots{color:var(--faint);letter-spacing:2px}
.bar a{color:var(--dim);text-decoration:none;transition:color .2s}
.bar a:hover{color:var(--accent)}
.bar-right{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.live{color:var(--accent2)}
.live::before{content:"●";margin-right:6px;animation:pulse 2s infinite}
@keyframes pulse{50%{opacity:.3}}

/* theme toggle */
.theme-toggle{
  font-family:var(--mono);font-size:12px;color:var(--dim);
  background:transparent;border:1px solid var(--faint);
  padding:3px 9px;border-radius:4px;cursor:pointer;
  transition:color .2s,border-color .2s,background .2s;
  line-height:1;
}
.theme-toggle:hover{color:var(--accent);border-color:var(--accent)}

/* prompt hero */
.hero{margin-bottom:64px}
.prompt{color:var(--accent);font-size:16px}
.prompt .user{color:var(--accent2)}
.prompt .at{color:var(--dim)}
.prompt .path{color:var(--ink)}
.cursor{
  display:inline-block;width:9px;height:17px;background:var(--accent);
  vertical-align:-3px;margin-left:4px;animation:blink 1.1s steps(2) infinite;
  box-shadow:0 0 8px var(--cursor-glow);
}
@keyframes blink{50%{opacity:0}}
.whoami{margin-top:18px;white-space:pre-wrap;color:var(--ink);min-height:120px}
.whoami .k{color:var(--accent)}
.whoami .v{color:var(--dim)}
.whoami .v.hi{color:var(--ink)}
.typed-cursor{display:inline-block;width:8px;height:15px;background:var(--accent2);vertical-align:-2px;margin-left:3px;animation:blink 1s steps(2) infinite}

h2.head{
  font-size:14px;font-weight:600;color:var(--accent);
  margin:56px 0 18px;letter-spacing:.02em;
  border-bottom:1px solid var(--faint);padding-bottom:10px;
  position:relative;
}
h2.head .hash{color:var(--faint);margin-right:8px}
h2.head::after{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:60px;background:var(--accent);box-shadow:0 0 8px var(--accent)}

/* intro */
.intro p{margin-bottom:14px;max-width:80ch}
.intro p:last-child{margin-bottom:0}
a.x{color:var(--accent);text-decoration:none;border-bottom:1px dotted var(--faint);transition:border-color .2s,color .2s}
a.x:hover{border-bottom-color:var(--accent);color:var(--accent2)}

/* projects grid */
.proj-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.proj{
  border:1px solid var(--faint);padding:20px 20px;position:relative;
  transition:background .25s,border-color .25s;
  background:var(--panel-bg);
}
.proj:hover{background:var(--accent-soft);border-color:var(--accent-border)}
/* corner brackets */
.proj::before,.proj::after,
.proj .br1,.proj .br2{
  content:"";position:absolute;width:11px;height:11px;
  border-color:var(--accent);border-style:solid;border-width:0;
  opacity:0;transition:opacity .2s;
}
.proj::before{top:6px;left:6px;border-top-width:1px;border-left-width:1px}
.proj::after{bottom:6px;right:6px;border-bottom-width:1px;border-right-width:1px}
.proj .br1{top:6px;right:6px;border-top-width:1px;border-right-width:1px}
.proj .br2{bottom:6px;left:6px;border-bottom-width:1px;border-left-width:1px}
.proj:hover::before,.proj:hover::after,
.proj:hover .br1,.proj:hover .br2{opacity:1}
.proj .line1{display:flex;justify-content:space-between;align-items:baseline;gap:14px;flex-wrap:wrap}
.proj .nm{color:var(--ink);font-weight:600}
.proj .nm .arrow{color:var(--accent);margin-right:8px}
.proj .gh{color:var(--dim);text-decoration:none;font-size:13px;white-space:nowrap;transition:color .2s}
.proj .gh:hover{color:var(--accent)}
.proj .ds{color:var(--ink);opacity:.85;margin:8px 0 0}
.proj .tg{margin-top:10px;color:var(--dim);font-size:13px}
.proj .tg span{color:var(--accent2);margin-right:10px}
.proj .tg span::before{content:"[";color:var(--faint)}
.proj .tg span::after{content:"]";color:var(--faint)}

/* skills grid */
.skills-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--faint);border:1px solid var(--faint)}
.skills .row{
  display:grid;grid-template-columns:130px 1fr;gap:12px;padding:14px 16px;
  background:var(--panel-bg-2);border:none;
}
.skills .k{color:var(--accent)}
.skills .v{color:var(--ink);opacity:.9}
.skills .v .sep{color:var(--faint);margin:0 6px}

/* entries */
.entry{padding:16px 0;border-bottom:1px dashed var(--faint)}
.entry:last-child{border-bottom:none}
.entry .l1{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}
.entry .t{color:var(--ink);font-weight:600}
.entry .d{color:var(--dim);font-size:13px;white-space:nowrap}
.entry .p{color:var(--ink);opacity:.85;margin-top:6px;max-width:80ch}
.entry .place{color:var(--dim);font-size:13px;margin-top:3px}

/* more */
.more{display:flex;flex-wrap:wrap;gap:8px 20px}
.more a{color:var(--ink);text-decoration:none;font-size:13px;transition:color .2s}
.more a:hover{color:var(--accent)}
.more a .lang{color:var(--dim);margin-left:6px}

/* contact */
.contact .mail{
  display:inline-block;margin-top:10px;
  color:var(--accent2);text-decoration:none;border:1px solid var(--faint);
  padding:10px 18px;border-radius:4px;transition:all .25s;
}
.contact .mail:hover{border-color:var(--accent2);background:var(--accent2-soft);box-shadow:0 0 16px var(--accent2-soft)}
.links{margin-top:20px;display:flex;flex-wrap:wrap;gap:10px 22px;font-size:13px}
.links a{color:var(--dim);text-decoration:none;transition:color .2s}
.links a:hover{color:var(--accent)}
.links a::before{content:"~/";color:var(--faint)}

footer{margin-top:80px;font-size:12px;color:var(--faint);text-align:center;border-top:1px solid var(--faint);padding-top:20px}

/* about page prose */
.about-prose{max-width:70ch}
.about-prose p{margin-bottom:18px;font-size:15.5px;line-height:1.75}
.about-prose p:last-child{margin-bottom:0}
a.lnk{color:var(--accent);text-decoration:none;border-bottom:1px dotted var(--faint);transition:border-color .2s,color .2s}
a.lnk:hover{border-bottom-color:var(--accent);color:var(--accent2)}

/* responsive */
@media (max-width:860px){
  .proj-grid{grid-template-columns:1fr}
  .skills-grid{grid-template-columns:1fr}
}
@media (max-width:560px){
  body{font-size:14px}
  .skills .row{grid-template-columns:1fr;gap:2px}
  #geo{opacity:.45}
  .bar{flex-direction:column;align-items:flex-start;gap:10px}
}
@media (prefers-reduced-motion:reduce){
  .cursor,.typed-cursor,.live::before{animation:none}
}