/* ============================================================
   BASE.CSS — Design Tokens, Reset, Typography
   AI Digital Guides Theme v1.0.0
   ============================================================ */

/* ── DESIGN TOKENS ────────────────────────────────────────── */
:root {
  --purple:        #4f46e5;
  --purple-light:  #818cf8;
  --magenta:       #06b6d4;
  --pink:          #f472b6;
  --cyan:          #22d3ee;
  --green:         #4ade80;
  --yellow:        #fbbf24;
  --red:           #f87171;

  --bg:            #0d0d1a;
  --bg-2:          #111128;
  --card:          #1a1a35;
  --card-2:        #1e1e3a;

  --text:          #f1f0ff;
  --text-muted:    #8b8aad;
  --text-dim:      #5a5980;

  --border:        rgba(79,70,229,0.2);
  --border-hover:  rgba(79,70,229,0.45);

  --glow-p:        rgba(79,70,229,0.4);
  --glow-m:        rgba(6,182,212,0.3);
  --glow-s:        rgba(79,70,229,0.15);

  --grad-primary:  linear-gradient(135deg,#4f46e5,#06b6d4);
  --grad-text:     linear-gradient(135deg,#818cf8,#4f46e5,#06b6d4);
  --grad-card:     linear-gradient(135deg,rgba(79,70,229,0.15),rgba(6,182,212,0.08));

  --radius-sm:     6px;
  --radius-md:     10px;
  --radius-lg:     14px;
  --radius-xl:     20px;
  --radius-full:   9999px;

  --shadow-card:   0 4px 24px rgba(0,0,0,0.3);
  --shadow-hover:  0 20px 60px rgba(124,58,237,0.15);
  --shadow-glow:   0 0 24px rgba(124,58,237,0.4);

  --transition:    all 0.28s cubic-bezier(0.4,0,0.2,1);
  --transition-fast: all 0.15s ease;

  --font-head:     'Syne', sans-serif;
  --font-body:     'Plus Jakarta Sans', sans-serif;

  --container:     1240px;
  --container-sm:  760px;

  --nav-h:         68px;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 20px);
  -webkit-text-size-adjust: 100%;
}

body {
  background-color: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, video, svg { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; transition: var(--transition-fast); }
ul, ol { list-style: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
input, textarea, select { font-family: inherit; }
h1,h2,h3,h4,h5,h6 { font-family: var(--font-head); font-weight: 800; line-height: 1.1; letter-spacing: -0.025em; color: var(--text); }

/* ── TYPOGRAPHY SCALE ────────────────────────────────────── */
h1 { font-size: clamp(2rem, 4.5vw, 3.6rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.7rem); }
h3 { font-size: clamp(1.1rem, 1.8vw, 1.35rem); }
h4 { font-size: 1.1rem; }
h5 { font-size: 0.95rem; }
h6 { font-size: 0.85rem; }

p { line-height: 1.75; color: var(--text-muted); }
strong { color: var(--text); font-weight: 700; }

/* ── UTILITIES ────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(20px, 4vw, 48px);
}

.container--sm { max-width: var(--container-sm); }

.gradient-text {
  background: var(--grad-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.section {
  padding-block: clamp(60px, 8vw, 100px);
}

.section--alt { background: var(--bg-2); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }

.screen-reader-text {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}
.screen-reader-text:focus {
  position: fixed; top: 16px; left: 16px;
  width: auto; height: auto;
  padding: 12px 24px;
  clip: auto;
  background: var(--purple);
  color: #fff;
  z-index: 10000;
  border-radius: var(--radius-md);
}

/* ── REVEAL ANIMATION ─────────────────────────────────────── */
/* Default: visible. JS adds 'js-ready' to <html> to enable animations.
   This prevents blank pages when JS is slow, blocked, or cached. */
.reveal {
  opacity: 1;
  transform: none;
  transition: opacity 0.6s ease, transform 0.6s ease;
}
/* Only hide elements AFTER JS confirms it's ready */
.js-ready .reveal {
  opacity: 0;
  transform: translateY(28px);
}
.js-ready .reveal.is-visible,
.js-ready .reveal.visible,
.reveal.is-visible,
.reveal.visible { opacity: 1; transform: none; }
.reveal--delay { transition-delay: 0.15s; }
.reveal--delay-2 { transition-delay: 0.3s; }
.reveal--delay-3 { transition-delay: 0.45s; }

/* ── PROSE (article content) ──────────────────────────────── */
.prose h2, .prose h3, .prose h4 { margin-top: 2.2em; margin-bottom: 0.6em; }
.prose p  { margin-bottom: 1.2em; }
.prose ul, .prose ol { padding-left: 1.5em; margin-bottom: 1.2em; list-style: disc; }
.prose ol { list-style: decimal; }
.prose li { margin-bottom: 0.4em; color: var(--text-muted); line-height: 1.7; }
.prose a  { color: var(--purple-light); text-decoration: underline; text-underline-offset: 3px; }
.prose a:hover { color: var(--magenta); }
.prose blockquote {
  border-left: 3px solid var(--magenta);
  padding-left: 1.2em;
  font-style: italic;
  color: var(--text-muted);
  margin-block: 1.5em;
}
.prose code {
  background: var(--card);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  font-size: 0.88em;
  color: var(--cyan);
  font-family: monospace;
}
.prose pre {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1.2em;
  overflow-x: auto;
  margin-block: 1.5em;
}
.prose pre code { background: none; padding: 0; }
.prose img { border-radius: var(--radius-lg); margin-block: 1.5em; }
.prose hr { border: none; border-top: 1px solid var(--border); margin-block: 2em; }
.prose table { width: 100%; border-collapse: collapse; margin-block: 1.5em; font-size: 0.9rem; }
.prose th { background: var(--card); color: var(--text); padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--border); }
.prose td { padding: 10px 14px; border-bottom: 1px solid var(--border); color: var(--text-muted); }