/* =========================================================================
   theme.css — typography refresh, light/dark theming, and a11y polish.
   Loaded AFTER style.css so its tokens win. Shared by both profile sites.
   Fonts: Space Grotesk (display) + Inter (body) + JetBrains Mono (data).
   ========================================================================= */

/* ---- Design tokens: light (default) ---- */
:root {
  --bg:            #ffffff;
  --bg-alt:        #f5f8fd;
  --surface:       #ffffff;
  --text:          #2b3138;
  --text-muted:    #5a6570;
  --heading:       #173b6c;
  --heading-strong:#050d18;
  --border:        #e6ecf5;
  --chip:          #e4edf9;
  --chip-2:        #d9e0e9;
  --track:         #dce8f8;
  --accent:        #149ddd;
  --accent-2:      #37b3ed;
  --timeline:      #1f5297;
  --dot:           #ffffff;
  --shadow:        0 6px 24px rgba(15, 34, 58, 0.08);

  --font-body:     "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display:  "Space Grotesk", "Inter", sans-serif;
  --font-mono:     "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ---- Design tokens: dark ---- */
:root[data-theme="dark"] {
  --bg:            #0d1520;
  --bg-alt:        #0a1017;
  --surface:       #141d2a;
  --text:          #b6c2cf;
  --text-muted:    #8a97a5;
  --heading:       #cfe0f5;
  --heading-strong:#eaf2fb;
  --border:        #233043;
  --chip:          #1b2735;
  --chip-2:        #222f3f;
  --track:         #1c2836;
  --accent:        #2aa9e6;
  --accent-2:      #57c0f0;
  --timeline:      #2f5488;
  --dot:           #141d2a;
  --shadow:        0 6px 24px rgba(0, 0, 0, 0.45);
}
/* No-JS fallback: honor the OS preference until the toggle script runs */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg:#0d1520; --bg-alt:#0a1017; --surface:#141d2a; --text:#b6c2cf;
    --text-muted:#8a97a5; --heading:#cfe0f5; --heading-strong:#eaf2fb;
    --border:#233043; --chip:#1b2735; --chip-2:#222f3f; --track:#1c2836;
    --accent:#2aa9e6; --accent-2:#57c0f0; --timeline:#2f5488; --dot:#141d2a;
    --shadow:0 6px 24px rgba(0,0,0,0.45);
  }
}

/* ---- Typography ---- */
body { font-family: var(--font-body); color: var(--text); background: var(--bg); }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); }
a { color: var(--accent); }
a:hover { color: var(--accent-2); }

/* Monospace for machine-readable data: role, dates, percentages */
.hero-container p, .hero-container .typed { font-family: var(--font-mono); letter-spacing: -0.01em; }
.skills .progress .skill .val { font-family: var(--font-mono); color: var(--accent); }
.resume .resume-item h5 { font-family: var(--font-mono); }

/* ---- Theming: map template surfaces onto tokens ---- */
.section-bg { background: var(--bg-alt); }
.section-title h2 { color: var(--heading); }
.section-title p { color: var(--text-muted); }
.about .content h3 { color: var(--heading); }
.skills .progress .skill { color: var(--heading-strong); }
.skills .progress-bar-wrap { background: var(--track); }
.card-title { color: var(--heading); }
.resume .resume-title { color: var(--heading); }
.resume .resume-item, .resume .project-item { border-left-color: var(--timeline); }
.resume .resume-item h4 { color: var(--heading-strong); }
.resume .resume-item h5 { background: var(--chip); color: var(--text); }
.resume .resume-item h6 { background: var(--chip-2); color: var(--text); }
.resume .resume-item::before { background: var(--dot); border-color: var(--timeline); }

/* Elements that are only restyled in dark mode */
:root[data-theme="dark"] .card { background: var(--surface); border-color: var(--border); }
:root[data-theme="dark"] .badge-light { background: var(--chip); color: var(--text); }
:root[data-theme="dark"] #hero {
  background: linear-gradient(90deg, #040b14 0%, #040b14 57%, var(--bg) 100%);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .card { background: var(--surface); border-color: var(--border); }
  :root:not([data-theme]) .badge-light { background: var(--chip); color: var(--text); }
  :root:not([data-theme]) #hero { background: linear-gradient(90deg,#040b14 0%,#040b14 57%,var(--bg) 100%); }
}

/* ---- Theme toggle button ---- */
.theme-toggle {
  position: fixed; top: 16px; right: 16px; z-index: 9998;
  width: 44px; height: 44px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface); color: var(--heading);
  border: 1px solid var(--border); box-shadow: var(--shadow);
  cursor: pointer; font-size: 22px; line-height: 1;
  transition: color .2s ease, transform .2s ease, background .2s ease;
}
.theme-toggle:hover { color: var(--accent); transform: translateY(-1px); }

/* ---- Accessibility polish ---- */
a:focus-visible, button:focus-visible, .theme-toggle:focus-visible,
.nav-menu a:focus-visible, .mobile-nav-toggle:focus-visible, .back-to-top:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
}

/* ---- Print: always render light and hide chrome ---- */
@media print {
  :root {
    --bg:#fff; --bg-alt:#fff; --surface:#fff; --text:#000;
    --heading:#000; --heading-strong:#000;
  }
  .theme-toggle { display: none !important; }
}