/* ============================================================
   123marketing.app — base: reset + body + element defaults + layout primitives
   Dark-first canvas. Section surface variants flip the ink tokens locally.
   ============================================================ */

/* ---------- modern reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  scroll-behavior: smooth;
  /* clip (not hidden) so a sticky header inside never gets a scroll-container
     ancestor — LESSONS 2026-08-05 (sticky broke under overflow-x:hidden). */
  overflow-x: clip;
}

body {
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--leading-normal);
  font-weight: 400;
  min-height: 100vh;
  overflow-x: clip;
}

img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; }
svg { fill: currentColor; }

input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }

/* ---------- global wrapping defaults (canon §3) ---------- */
p, li, figcaption, blockquote, .callout, .banner, dd { text-wrap: var(--wrap-body); }
h1, h2, h3, h4, h5, h6 { text-wrap: var(--wrap-heading); }

/* ---------- links ---------- */
a { color: var(--color-primary); text-decoration: none; transition: color var(--duration-fast) var(--ease); }
a:hover { color: var(--color-primary-hover); }

/* focus (a11y — never omit) */
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible, summary:focus-visible {
  outline: 3px solid var(--color-focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ---------- typography defaults ---------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 900;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-ink);
  max-width: none;   /* headings FILL their column (canon Rule 1) */
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); font-weight: 700; line-height: var(--leading-snug); letter-spacing: var(--tracking-snug); }
h4 { font-size: var(--fs-body); font-weight: 700; line-height: var(--leading-snug); }

p { max-width: var(--measure); }        /* measure on TEXT only */
strong, b { font-weight: 700; color: var(--color-ink); }
em { font-style: normal; color: var(--color-primary); font-weight: 600; }

.mark { color: var(--color-primary); }
.mark-danger { color: var(--color-danger); }

::selection { background: var(--color-primary); color: var(--color-primary-ink); }

.num, .stat-value, time { font-variant-numeric: tabular-nums; letter-spacing: 0; }

/* ---------- layout primitives ---------- */
.container {
  max-width: var(--container-max);
  padding-inline: var(--container-pad);
  margin-inline: auto;
  width: 100%;
}
.container--narrow { max-width: 56rem; }
.container--wide { max-width: 88rem; }

.section { padding-block: var(--space-section); position: relative; }
.section--tight { padding-block: clamp(var(--space-12), 6vw, var(--space-16)); }

/* raised dark surface band */
.section--surface { background: var(--color-surface); }

/* light contrast band — re-point ink tokens to dark-on-light */
.section--paper {
  background: var(--color-paper);
  color: var(--color-paper-ink);
  --color-ink: var(--color-paper-ink);
  --color-ink-muted: var(--clay-56);
  --color-line: var(--paper-line);
  --color-surface: #ffffff;
}

/* full lime band (rare — loud closing CTA) */
.section--accent {
  background: var(--color-primary);
  color: var(--color-primary-ink);
  --color-ink: var(--color-primary-ink);
  --color-ink-muted: rgba(10, 10, 11, 0.68);
  --color-line: rgba(10, 10, 11, 0.20);
  --color-surface: #0a0a0b;
}

/* ---------- eyebrow / kicker ---------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-inline);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: var(--space-4);
}
.section--paper .eyebrow, .section--accent .eyebrow { color: currentColor; opacity: 0.72; }
.eyebrow::before {
  content: "";
  width: 1.75rem; height: 2px;
  background: currentColor;
  display: inline-block;
}

/* ---------- section head cluster (fills column or centered — canon §4) ---------- */
.sec-head { max-width: 52rem; }
.sec-head.is-center { margin-inline: auto; text-align: center; }
.sec-head .lead { max-width: var(--measure); margin-top: var(--space-4); font-size: var(--fs-lead); color: var(--color-ink-muted); }
.sec-head.is-center .lead { margin-inline: auto; }

.lead { font-size: var(--fs-lead); color: var(--color-ink-muted); max-width: var(--measure); }
.muted { color: var(--color-ink-muted); }

/* ---------- hairline ---------- */
.hairline { border: 0; height: 1px; background: var(--color-line); margin-block: var(--space-8); }

/* ---------- skip-link + sr-only (a11y) ---------- */
.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--color-primary); color: var(--color-primary-ink);
  padding: var(--space-3) var(--space-5); z-index: var(--z-toast); font-weight: 700;
}
.skip-link:focus { left: var(--space-4); top: var(--space-4); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}