/* =============================================================
   TechShield Guide — Global Stylesheet
   Design tokens live here + component styles Tailwind can't do
   cleanly via utility classes alone (progress bar, TOC, prose).
   ============================================================= */

:root{
  --ts-navy: #0f172a;
  --ts-blue: #2563eb;
  --ts-blue-dark: #1d4ed8;
  --ts-sky: #0ea5e9;
  --ts-mist: #f1f5f9;
  --ts-border: #e2e8f0;
  --ts-shield: #059669;
  --ts-bg: #ffffff;
  --ts-text: #1e293b;
}

html.dark{
  --ts-navy: #f1f5f9;
  --ts-blue: #60a5fa;
  --ts-blue-dark: #3b82f6;
  --ts-sky: #38bdf8;
  --ts-mist: #1e293b;
  --ts-border: #334155;
  --ts-shield: #34d399;
  --ts-bg: #0b1220;
  --ts-text: #cbd5e1;
}

html.dark body{ background-color: var(--ts-bg); color: var(--ts-text); }
html.dark .bg-white{ background-color: #0f172a !important; }
html.dark .bg-slate-50{ background-color: #0b1220 !important; }
html.dark .bg-slate-100{ background-color: #111c30 !important; }
html.dark .text-slate-900{ color: #f1f5f9 !important; }
html.dark .text-slate-800{ color: #e2e8f0 !important; }
html.dark .text-slate-700{ color: #cbd5e1 !important; }
html.dark .text-slate-600{ color: #94a3b8 !important; }
html.dark .border-slate-200{ border-color: #1e293b !important; }
html.dark .border-slate-100{ border-color: #1e293b !important; }
html.dark header.site-header{ background-color: rgba(11,18,32,0.85) !important; }
html.dark .shadow-card{ box-shadow: 0 1px 2px rgba(0,0,0,0.4), 0 8px 24px -12px rgba(0,0,0,0.5); }

body{
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
  color: var(--ts-text);
  background-color: var(--ts-bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .font-display{
  font-family: "Sora", "Inter", ui-sans-serif, system-ui, sans-serif;
}

.font-mono-ui{
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* Skip link for accessibility */
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--ts-blue); color:#fff; padding:.75rem 1.25rem; border-radius:0 0 .5rem 0;
}
.skip-link:focus{ left:0; }

/* Reading progress bar */
#reading-progress{
  position: fixed; top:0; left:0; height:3px; width:0%;
  background: linear-gradient(90deg, var(--ts-blue), var(--ts-shield));
  z-index: 60; transition: width .1s ease-out;
}

/* Back to top */
#back-to-top{
  position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 50;
  width: 44px; height: 44px; border-radius: 9999px;
  background: var(--ts-navy); color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 10px 25px -8px rgba(15,23,42,.45);
  opacity:0; visibility:hidden; transform: translateY(8px);
  transition: opacity .25s ease, transform .25s ease, visibility .25s;
}
#back-to-top.show{ opacity:1; visibility:visible; transform:translateY(0); }
#back-to-top:hover{ background: var(--ts-blue); }

/* Shield signature mark: animated scan line inside hero graphic */
.shield-scan{
  animation: shieldscan 3.2s ease-in-out infinite;
}
@keyframes shieldscan{
  0%{ transform: translateY(-46px); opacity:0; }
  10%{ opacity:1; }
  50%{ transform: translateY(46px); opacity:1; }
  60%{ opacity:0; }
  100%{ transform: translateY(-46px); opacity:0; }
}
@media (prefers-reduced-motion: reduce){
  .shield-scan{ animation: none; }
  *{ scroll-behavior: auto !important; }
}

/* Clearance-style badges used for category / difficulty labels */
.clearance-badge{
  font-family: "JetBrains Mono", ui-monospace, monospace;
  letter-spacing: .06em;
  font-size: .68rem;
  font-weight: 600;
  text-transform: uppercase;
  border: 1px solid var(--ts-border);
  border-radius: 999px;
  padding: .2rem .65rem;
  display:inline-flex;
  align-items:center;
  gap:.35rem;
}

/* Article prose styling */
.article-prose{ color: var(--ts-text); line-height:1.8; }
.article-prose h2{
  font-size:1.5rem; font-weight:700; color:var(--ts-navy);
  margin-top:2.5rem; margin-bottom:1rem; scroll-margin-top: 6rem;
}
.article-prose h3{
  font-size:1.2rem; font-weight:700; color:var(--ts-navy);
  margin-top:2rem; margin-bottom:.75rem; scroll-margin-top: 6rem;
}
.article-prose p{ margin-bottom:1.15rem; }
.article-prose ul, .article-prose ol{ margin: 0 0 1.15rem 1.4rem; }
.article-prose ul{ list-style: disc; }
.article-prose ol{ list-style: decimal; }
.article-prose li{ margin-bottom:.5rem; }
.article-prose a{ color: var(--ts-blue); text-decoration: underline; text-underline-offset: 2px; }
.article-prose blockquote{
  border-left: 3px solid var(--ts-blue);
  background: var(--ts-mist);
  padding: 1rem 1.25rem;
  border-radius: .25rem;
  margin: 1.5rem 0;
  font-style: italic;
}
.article-prose code{
  font-family:"JetBrains Mono", monospace; background:var(--ts-mist);
  padding:.15rem .4rem; border-radius:.3rem; font-size:.85em;
}

/* Table of contents active link */
.toc-link{ display:block; padding:.3rem 0 .3rem .75rem; border-left: 2px solid transparent; color:#475569; font-size:.875rem; }
html.dark .toc-link{ color:#94a3b8; }
.toc-link.active{ border-left-color: var(--ts-blue); color: var(--ts-blue); font-weight:600; }

/* Simple fade/slide-in for cards on load */
.reveal{ opacity:0; transform: translateY(14px); animation: reveal .6s ease forwards; }
@keyframes reveal{ to{ opacity:1; transform:none; } }

/* Focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline: 2px solid var(--ts-blue); outline-offset: 2px;
}

/* Utility: line clamp */
.line-clamp-2{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.line-clamp-3{ display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }