/* Shared design tokens and base styles for index.html and youtube.html */

:root{
  --bg:#0A0E13;
  --bg-alt:#0F151B;
  --bg-elevated:#141C24;
  --border:#212B34;
  --border-soft:#1A222A;
  --text:#E7EDF3;
  --text-dim:#8C99A6;
  --text-faint:#57626D;
  --accent:#5EEAD4;
  --accent-dim:#2E6F66;
  --warm:#F2A65A;
  --font-display:'Space Grotesk', sans-serif;
  --font-body:'Inter', sans-serif;
  --font-mono:'JetBrains Mono', monospace;
  --max-w:1120px;
}

*{margin:0;padding:0;box-sizing:border-box;}

html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important;}
}

a{color:inherit;text-decoration:none;}
::selection{background:var(--accent-dim);color:var(--text);}

.wrap{max-width:var(--max-w);margin:0 auto;padding:0 32px;}

a:focus-visible, button:focus-visible{
  outline:2px solid var(--accent); outline-offset:3px; border-radius:2px;
}

/* NAV */
nav.wrap{
  display:flex; align-items:center; justify-content:space-between;
  height:68px;
}
.nav-cta{
  font-family:var(--font-mono); font-size:12px; padding:8px 16px;
  border:1px solid var(--border); border-radius:3px; color:var(--text-dim);
  transition:all 0.2s ease;
}
.nav-cta:hover{border-color:var(--accent); color:var(--accent);}

/* EYEBROW */
.eyebrow{
  font-family:var(--font-mono); font-size:13px; color:var(--accent);
  letter-spacing:1px; margin-bottom:20px; display:flex; align-items:center; gap:10px;
}
.eyebrow::before{content:'';width:24px;height:1px;background:var(--accent);}

/* SECTION HEAD divider */
.section-head::after{
  content:''; flex:1; height:1px; background:var(--border);
}