/* ═══════════════════════════════════════════
   DYSAUTONOMIA ACADEMY — Global Styles
   Dark clinical aesthetic
   ═══════════════════════════════════════════ */

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

/* ── Design Tokens ── */
:root{
  --bg-primary:#0b0f1a;
  --bg-surface:#0e1624;
  --bg-elevated:#111827;
  --bg-sidebar:#0a1018;
  --border:#1a2540;
  --border-hover:#2d4a6a;

  --text-primary:#e0e4ec;
  --text-secondary:#94a3b8;
  --text-muted:#475569;
  --text-dim:#334155;
  --text-heading:#f1f5f9;

  --accent-teal:#2dd4bf;
  --accent-teal-dim:#134e4a;
  --accent-teal-bg:#091e1e;
  --accent-orange:#f97316;
  --accent-orange-dim:#4a3000;
  --accent-orange-bg:#1a1308;
  --accent-red:#ef4444;
  --accent-green:#4ade80;
  --accent-green-dim:#166534;
  --accent-green-bg:#0d1f14;
  --accent-purple:#c084fc;

  --radius-sm:8px;
  --radius-md:12px;
  --radius-lg:18px;
  --radius-xl:24px;

  --font-body:-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  --font-reading:Georgia,'Times New Roman',serif;
  --font-mono:'SF Mono','Fira Code','Consolas',monospace;

  --content-width:720px;
  --sidebar-width:280px;
}

/* ── Base ── */
html{font-size:16px;scroll-behavior:smooth}
body{
  background:var(--bg-primary);
  color:var(--text-primary);
  font-family:var(--font-body);
  line-height:1.6;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}

/* ── Typography ── */
h1{font-size:28px;font-weight:700;color:var(--text-heading);line-height:1.25;letter-spacing:-.02em}
h2{font-size:22px;font-weight:700;color:var(--text-heading);line-height:1.3;letter-spacing:-.01em}
h3{font-size:17px;font-weight:600;color:var(--text-heading);line-height:1.4}
h4{font-size:15px;font-weight:600;color:var(--text-secondary);line-height:1.4;text-transform:uppercase;letter-spacing:.05em}
p{margin-bottom:1em;line-height:1.7}
a{color:var(--accent-teal);text-decoration:none;transition:color .15s}
a:hover{color:#5eead4}
strong{color:var(--text-heading);font-weight:600}
em{color:var(--text-muted);font-style:italic}

/* ── Top Nav ── */
.top-nav{
  position:sticky;top:0;z-index:40;
  background:rgba(11,15,26,.92);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);
  padding:0 24px;
  height:56px;
  display:flex;align-items:center;justify-content:space-between;
}
.nav-brand{
  display:flex;align-items:center;gap:10px;
  font-size:15px;font-weight:700;color:var(--text-heading);
  letter-spacing:-.01em;
}
.nav-brand span{color:var(--accent-teal);font-weight:400;font-size:13px}
.nav-progress{
  display:flex;align-items:center;gap:12px;
  font-size:12px;color:var(--text-muted);
}
.nav-progress-bar{
  width:120px;height:4px;background:var(--border);border-radius:2px;overflow:hidden;
}
.nav-progress-fill{
  height:100%;background:var(--accent-teal);border-radius:2px;
  transition:width .4s ease;
}

/* ── Buttons ── */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 22px;border-radius:var(--radius-sm);
  font-size:14px;font-weight:600;
  border:none;cursor:pointer;transition:all .18s;
  text-decoration:none;
}
.btn-primary{background:var(--accent-teal);color:#0b0f1a}
.btn-primary:hover{background:#5eead4;color:#0b0f1a}
.btn-secondary{background:var(--bg-elevated);color:var(--text-secondary);border:1px solid var(--border)}
.btn-secondary:hover{border-color:var(--border-hover);color:var(--text-primary)}
.btn-ghost{background:transparent;color:var(--text-muted);padding:8px 14px}
.btn-ghost:hover{color:var(--text-primary)}
.btn-lg{padding:14px 32px;font-size:16px;border-radius:var(--radius-md)}

/* ── Cards ── */
.card{
  background:var(--bg-surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:24px 28px;
  transition:border-color .2s,box-shadow .2s;
}
.card:hover{border-color:var(--border-hover)}
.card-clickable{cursor:pointer}
.card-clickable:hover{box-shadow:0 4px 20px rgba(0,0,0,.3)}

/* ── Badges ── */
.badge{
  display:inline-flex;align-items:center;
  padding:3px 10px;border-radius:20px;
  font-size:11px;font-weight:600;letter-spacing:.04em;
}
.badge-teal{background:var(--accent-teal-bg);color:var(--accent-teal);border:1px solid var(--accent-teal-dim)}
.badge-orange{background:var(--accent-orange-bg);color:var(--accent-orange);border:1px solid var(--accent-orange-dim)}
.badge-green{background:var(--accent-green-bg);color:var(--accent-green);border:1px solid var(--accent-green-dim)}
.badge-muted{background:var(--bg-elevated);color:var(--text-muted);border:1px solid var(--border)}

/* ── Source Citations ── */
.cite{
  color:var(--accent-teal);font-size:12px;font-weight:600;
  padding:2px 8px;background:var(--accent-teal-bg);
  border-radius:4px;white-space:nowrap;
}

/* ── Progress Indicators ── */
.progress-ring{
  width:48px;height:48px;position:relative;
}
.progress-ring svg{transform:rotate(-90deg)}
.progress-ring circle{fill:none;stroke-width:4;stroke-linecap:round}
.progress-ring .bg{stroke:var(--border)}
.progress-ring .fill{stroke:var(--accent-teal);transition:stroke-dashoffset .6s ease}
.progress-pct{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:700;color:var(--text-secondary);
}

/* ── Block Status Icons ── */
.status-icon{
  width:20px;height:20px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:10px;flex-shrink:0;
}
.status-locked{background:var(--bg-elevated);color:var(--text-dim);border:1px solid var(--border)}
.status-available{background:transparent;color:var(--text-muted);border:2px solid var(--text-dim)}
.status-active{background:var(--accent-teal-bg);color:var(--accent-teal);border:2px solid var(--accent-teal)}
.status-complete{background:var(--accent-green-bg);color:var(--accent-green);border:2px solid var(--accent-green-dim)}

/* ── Layout Helpers ── */
.container{max-width:1100px;margin:0 auto;padding:0 24px}
.container-narrow{max-width:800px;margin:0 auto;padding:0 24px}
.flex{display:flex}
.flex-col{flex-direction:column}
.gap-sm{gap:8px}
.gap-md{gap:16px}
.gap-lg{gap:24px}
.gap-xl{gap:40px}
.items-center{align-items:center}
.justify-between{justify-content:space-between}
.text-center{text-align:center}

/* ── Page Sections ── */
.page-header{padding:40px 0 32px}
.page-header h1{margin-bottom:8px}
.page-header p{color:var(--text-muted);font-size:14px}

.section{padding:32px 0}
.section-label{
  font-size:11px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--text-dim);margin-bottom:16px;
}

/* ── Dividers ── */
.divider{height:1px;background:var(--border);margin:32px 0}

/* ── Page Transitions ── */
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes slideIn{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:translateX(0)}}

main,.lesson-layout{animation:fadeIn .3s ease}

/* ── Smooth Hover States ── */
.module-card,.block-row,.feature-card,.quiz-option,.tier-pill,.sidebar-block{
  transition:all .18s ease;
}

/* ── Focus States for Accessibility ── */
a:focus-visible,.btn:focus-visible,.quiz-option:focus-visible{
  outline:2px solid var(--accent-teal);
  outline-offset:2px;
}

/* ── Selection Color ── */
::selection{
  background:rgba(45,212,191,.2);
  color:var(--text-heading);
}

/* ── Scrollbar Styling (WebKit) ── */
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:var(--bg-primary)}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:var(--border-hover)}

/* ── Responsive ── */
@media(max-width:768px){
  :root{--sidebar-width:0px}
  .hide-mobile{display:none!important}
  .container{padding:0 16px}
  h1{font-size:24px}
  h2{font-size:20px}
}

/* ── Reduced Motion ── */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
}