/* ============================================================
   BASE.CSS — Typography, Body, Links — v2 Premium
   Manrope display + DM Sans body
   ============================================================ */

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 400;
  color: var(--color-text-primary);
  background-color: var(--color-bg-primary);
  letter-spacing: var(--tracking-normal);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Skip to content ──────────────────────────────────────── */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-4);
  z-index: 10000;
  padding: var(--space-3) var(--space-6);
  background: var(--color-gold);
  color: var(--color-bg-primary);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-sm);
  border-radius: var(--radius-sm);
  transition: top var(--duration-fast) var(--ease-standard);
}
.skip-link:focus { top: var(--space-4); }

/* ── Headings — Manrope ──────────────────────────────────── */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--color-text-primary);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

h1 {
  font-size: var(--text-hero);
  font-weight: 800;
}
h2 {
  font-size: var(--text-3xl);
  font-weight: 800;
}
h3 {
  font-size: var(--text-xl);
  font-weight: 700;
}
h4 {
  font-size: var(--text-lg);
  font-weight: 700;
  line-height: var(--leading-snug);
}
h5 {
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--color-text-primary);
}
h6 {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-text-secondary);
}

/* ── Body text ────────────────────────────────────────────── */
p {
  color: var(--color-text-secondary);
  line-height: var(--leading-normal);
  font-size: var(--text-base);
}

/* ── Links ────────────────────────────────────────────────── */
a {
  color: var(--color-secondary);
  transition: color var(--duration-fast) var(--ease-standard);
}
a:hover { color: var(--color-primary); }

/* ── Selection ────────────────────────────────────────────── */
::selection         { background: var(--color-gold); color: #fff; }
::-moz-selection    { background: var(--color-gold); color: #fff; }

/* ── Scrollbar ────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--color-surface); }
::-webkit-scrollbar-thumb {
  background: rgba(201,168,76,0.4);
  border-radius: var(--radius-full);
}
::-webkit-scrollbar-thumb:hover { background: var(--color-gold); }

/* ── Gold gradient text utility ──────────────────────────── */
.text-gold-gradient {
  background: var(--gradient-gold);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Teal gradient text ───────────────────────────────────── */
.text-teal-gradient {
  background: var(--gradient-teal);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Kinetic gradient text ────────────────────────────────── */
.text-kinetic-gradient {
  background: var(--gradient-kinetic);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Strong / em ──────────────────────────────────────────── */
strong, b { font-weight: 700; color: var(--color-text-primary); }
em, i     { font-style: italic; }

/* ── HR ───────────────────────────────────────────────────── */
hr {
  border: none;
  height: 1px;
  background: var(--color-border);
  margin: var(--space-12) 0;
}

/* ── Small ────────────────────────────────────────────────── */
small { font-size: var(--text-sm); color: var(--color-text-muted); }

/* ── Kinetic dot-grid background ──────────────────────────── */
.kinetic-grid-bg {
  background-image: radial-gradient(circle at 2px 2px, rgba(25,28,29,0.07) 1px, transparent 0);
  background-size: 40px 40px;
}