/* ============================================================
   Y2Lead Website 2.0 — Design Foundations (implementation)
   Sources: WP-001B (grammar) + WP-001C (values via tokens.css)
   Contains: base field, the four typographic voices, layout
   primitives, motion primitives (still/whisper/gentle),
   interaction states, reduced-motion collapse.
   Contains NO scene layouts, NO components, NO content styling.
   ============================================================ */

/* ---- Base field (WP-001B §5 · D-01) ------------------------ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  /* scroll is sovereign — no smooth-scroll hijacking of pace;
     anchor jumps remain instant and calm (ARCH-002 §5) */
  background: var(--color-field);
}

body {
  font-family: var(--type-family-primary);
  font-size: var(--type-scale-body);
  line-height: var(--type-lineheight-body);
  font-weight: var(--type-weight-regular);
  color: var(--color-ink-primary);
  background: var(--color-field);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---- The four canonical voices (WP-001B §1 · WP-001C §3) ----
   Every text element on the site speaks in exactly one voice.  */

.voice-monument {
  font-size: var(--type-scale-monument);
  line-height: var(--type-lineheight-monument);
  font-weight: var(--type-weight-semibold);
  letter-spacing: var(--type-tracking-display);
  color: var(--color-ink-primary);
  max-width: var(--type-measure-statement);
}

.voice-statement {
  font-size: var(--type-scale-statement);
  line-height: var(--type-lineheight-statement);
  font-weight: var(--type-weight-semibold);
  letter-spacing: var(--type-tracking-display);
  color: var(--color-ink-primary);
  max-width: var(--type-measure-statement);
}

.voice-body {
  font-size: var(--type-scale-body);
  line-height: var(--type-lineheight-body);
  font-weight: var(--type-weight-regular);
  color: var(--color-ink-secondary);
  max-width: var(--type-measure-body);
}

.voice-body + .voice-body { margin-top: var(--type-paragraph-spacing); }

.voice-whisper {
  font-size: var(--type-scale-whisper);
  line-height: var(--type-lineheight-whisper);
  font-weight: var(--type-weight-medium);
  color: var(--color-ink-whisper);
}

.voice-whisper--eyebrow {
  text-transform: uppercase;
  letter-spacing: var(--type-tracking-whisper);
}

/* ---- Layout primitives (WP-001B §2 · WP-001C §4) ------------ */

.narrative-column {
  max-width: var(--layout-width-narrative);
  margin-inline: auto;
  padding-inline: var(--layout-margin-min);
}

@media (min-width: 768px) {
  .narrative-column { padding-inline: var(--space-5); } /* 48px+ large */
}

.figure-canvas {
  max-width: var(--layout-width-figure);
  margin-inline: auto;
  padding-inline: var(--layout-margin-min);
}

/* interval classes — utilities named by grammar, not by size */
.gap-intra   { margin-top: var(--space-2); }  /* within an idea  */
.gap-inter   { margin-top: var(--space-5); }  /* between ideas   */
.gap-scene   { margin-top: var(--space-section); } /* between scenes */

/* ---- Motion primitives (WP-001B §4 · WP-001C §6) ------------
   Registers are ceilings. still = no classes consumed.
   Elements start unrevealed; motion.js reveals on scroll.       */

.js .reveal {
  opacity: 0;
  transform: translateY(var(--motion-distance-settle));
  transition:
    opacity var(--motion-duration-whisper) var(--motion-easing-calm),
    transform var(--motion-duration-whisper) var(--motion-easing-calm);
  transition-delay: var(--motion-delay-default);
}

.js .reveal--gentle {
  transition-duration: var(--motion-duration-gentle),
                       var(--motion-duration-gentle);
}

/* sequenced steps within one beat — max 4 (WP-001C §6) */
.js .reveal--step-2 { transition-delay: calc(var(--motion-stagger-step) * 1); }
.js .reveal--step-3 { transition-delay: calc(var(--motion-stagger-step) * 2); }
.js .reveal--step-4 { transition-delay: calc(var(--motion-stagger-step) * 3); }

.js .reveal.is-revealed {
  opacity: 1;
  transform: none;
}

/* reduced motion: full collapse to still (WP-001C §6/§11 [C]) */
@media (prefers-reduced-motion: reduce) {
  .js .reveal, .js .reveal--gentle {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---- Interaction states (WP-001C §10) ----------------------- */

a { color: var(--color-accent); text-decoration: none; }
a:hover {
  color: var(--color-accent-active);
  text-decoration: underline;
  transition: color var(--motion-duration-feedback) var(--motion-easing-feedback);
}

:focus-visible {
  outline: var(--interact-focus-ring);
  outline-offset: var(--interact-focus-offset);
}

:active { opacity: var(--interact-pressed-opacity); }

/* ---- Hairline (last resort — space first, WP-001B §2) ------- */
.hairline { border-bottom: var(--border-width-hairline) solid var(--color-hairline); }