/* ============================================================
   SHARED STYLESHEET — Fahrul Dwi Anugrah Portfolio
   Theme: TERMINAL-LIGHT.
   Light editor surfaces throughout; the palette is borrowed from
   a real light syntax theme (One Light), so every accent maps to
   a code token: keyword, string, number, function, built-in.
   All *-text variants are darkened to clear WCAG AA on white.
   ============================================================ */

:root{
  /* --- editor surfaces --- */
  --bg:#fafafa;
  --bg-alt:#ffffff;
  --surface:#ffffff;
  --surface-2:#f2f2f4;
  --border:#e3e3e6;
  --border-strong:#d5d5da;
  --border-soft:#eeeef0;
  --text:#383a42;
  --text-dim:#525460;
  --text-faint:#6b6c75;

  /* --- editor chrome (gutter / titlebars / panels).
         Names kept from the previous theme so existing markup
         keeps working — values are now light, not dark. --- */
  --dark:#f2f2f4;
  --dark-2:#ffffff;
  --dark-3:#e9e9ec;
  --dark-border:#e3e3e6;
  --dark-text:#383a42;
  --dark-text-dim:#525460;
  --dark-text-faint:#6b6c75;

  /* --- primary accent: function blue --- */
  --accent:#4078f2;
  --accent-bright:#4078f2;
  --accent-deep:#2a5fd0;
  --accent-dim:#eaf0fe;

  /* --- status: string green / number gold / comment gray --- */
  --up:#50a14f;
  --up-dim:#e9f5e9;
  --up-text:#3a7a39;
  --amber:#c18401;
  --amber-dim:#fbf3e0;
  --amber-text:#8a5e00;
  --planned:#a0a1a7;
  --planned-dim:#f0f0f2;
  --planned-text:#63646d;

  /* --- category accents, each a syntax token --- */
  --blue:#4078f2;
  --blue-dim:#eaf0fe;
  --blue-text:#2a5fd0;
  --violet:#a626a4;
  --violet-dim:#faeafa;
  --violet-text:#a626a4;
  --teal:#0184bc;
  --teal-dim:#e4f4fb;
  --teal-text:#01678f;
  --magenta:#e45649;
  --magenta-dim:#fdeceb;
  --magenta-text:#c4372b;

  --display:'Space Grotesk',sans-serif;
  --body:'Inter',sans-serif;
  --mono:'JetBrains Mono',monospace;
  --maxw:1120px;
  --radius:8px;

  --shadow-sm:0 1px 2px rgba(56,58,66,.06);
  --shadow-md:0 6px 20px rgba(56,58,66,.08);
  --shadow-lg:0 16px 40px rgba(56,58,66,.12);
}

*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg);
  background-image:radial-gradient(circle at 1px 1px, rgba(56,58,66,0.07) 1px, transparent 0);
  background-size:26px 26px;
  color:var(--text);
  font-family:var(--body);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none;}
img,svg{display:block;max-width:100%;}
::selection{background:var(--accent-dim);color:var(--accent-deep);}
a:focus-visible,button:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px;}

/* ---------- Editor panel shell (was .dark-section) ---------- */
.dark-section{
  background:var(--surface-2);
  background-image:
    linear-gradient(rgba(56,58,66,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(56,58,66,0.05) 1px, transparent 1px);
  background-size:52px 52px;
  color:var(--text);
  position:relative;
  border-bottom:1px solid var(--border);
}

/* ---------- Buttons ---------- */
.btn{
  font-family:var(--mono);font-weight:600;font-size:14px;
  padding:12px 20px;border-radius:var(--radius);
  display:inline-flex;align-items:center;gap:8px;
  transition:transform .15s, box-shadow .15s, border-color .15s, background .15s;
  border:1px solid transparent;cursor:pointer;
}
.btn:hover{transform:translateY(-2px);}
.btn-primary{background:var(--accent-deep);color:#fff;box-shadow:0 6px 16px rgba(42,95,208,.24);}
.btn-primary:hover{background:var(--accent);box-shadow:0 8px 22px rgba(64,120,242,.32);}
.btn-outline{border-color:var(--border);color:var(--text);background:#fff;box-shadow:var(--shadow-sm);}
.btn-outline:hover{border-color:var(--accent);color:var(--accent-deep);}
.dark-section .btn-outline{border-color:var(--border);color:var(--text);background:#fff;box-shadow:var(--shadow-sm);}
.dark-section .btn-outline:hover{border-color:var(--accent);color:var(--accent-deep);}

/* ---------- Status / type pills ---------- */
.status-pill{
  font-family:var(--mono);font-size:10px;padding:3px 9px;border-radius:100px;white-space:nowrap;
  display:inline-flex;align-items:center;gap:5px;font-weight:700;width:fit-content;
}
.status-pill::before{content:'';width:6px;height:6px;border-radius:50%;}
.status-done{background:var(--up-dim);color:var(--up-text);}
.status-done::before{background:var(--up);}
.status-progress{background:var(--amber-dim);color:var(--amber-text);}
.status-progress::before{background:var(--amber);}
.status-planned{background:var(--planned-dim);color:var(--planned-text);}
.status-planned::before{background:var(--planned);}

.type-pill{font-family:var(--mono);font-size:10.5px;padding:3px 9px;border-radius:100px;font-weight:600;display:inline-block;}
.type-pill.type-self{background:var(--surface-2);color:var(--text-faint);border:1px solid var(--border);}
.type-pill.type-bootcamp{background:var(--violet-dim);color:var(--violet-text);border:1px solid rgba(166,38,164,.22);font-weight:700;}

/* ---------- Terminal window chrome ---------- */
.term-dot,.dot-red,.dot-yellow,.dot-green,.d-red,.d-yellow,.d-green{width:10px;height:10px;border-radius:50%;display:inline-block;}
.dot-red,.d-red{background:#ff5f57;}
.dot-yellow,.d-yellow{background:#febc2e;}
.dot-green,.d-green{background:#28c840;}

/* ---------- Terminal-light signatures ---------- */
.caret-blink{
  display:inline-block;width:9px;height:1.05em;vertical-align:-2px;margin-left:4px;
  background:var(--accent);animation:caretBlink 1.15s step-end infinite;
}
@keyframes caretBlink{0%,100%{opacity:1}50%{opacity:0}}
@media(prefers-reduced-motion:reduce){.caret-blink{animation:none;}}