/* ==========================================================================
   base.css — reset, body defaults, type primitives, layout primitives

   Built on Josh Comeau's modern reset (small, well-justified). Body lives
   in dark mode by default. Headings, paragraphs, lists, and selections
   all consume tokens — no hardcoded values past this point.
   ========================================================================== */

/* ----------------------------------------------------------------------
   1. Reset (Josh Comeau, lightly trimmed)
   ---------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html,
body {
  height: 100%;
}

/* Smooth scrolling for anchor jumps (nav-pill items → section IDs).
   Global reduced-motion override in tokens.css resets this to `auto`. */
html {
  scroll-behavior: smooth;
}

/* Keep sections clear of the fixed floating-pill header when jumped to
   via in-page anchor link — without this, the target's top slides
   underneath the header. ~80px matches the header's vertical footprint. */
section[id] {
  scroll-margin-top: 80px;
}

/* Visually-hidden — accessible to screen readers, not visible on screen.
   Used by the mobile-menu dialog title and similar SR-only labels. */
.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;
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

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

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

#root,
#__next {
  isolation: isolate;
}

/* ----------------------------------------------------------------------
   2. Document defaults
   ---------------------------------------------------------------------- */
html {
  /* Honor user's font-size preference; rem stays predictable. */
  font-size: 100%;
}

body {
  background-color: var(--bg);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--text-body-md);
  font-weight: var(--weight-regular);
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-body);
}

/* ----------------------------------------------------------------------
   3. Selection — subtle ember tint
   Ember at low alpha so the highlight doesn't shout; text stays readable.
   ---------------------------------------------------------------------- */
::selection {
  background-color: rgba(249, 115, 22, 0.25);  /* --ember-glow at 25% */
  color: var(--text-primary);
}

/* ----------------------------------------------------------------------
   4. Focus — visible only on keyboard navigation
   Uses --primary so the ring is consistent across dark and light modes.
   ---------------------------------------------------------------------- */
:focus {
  outline: none;
}

:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* ----------------------------------------------------------------------
   5. Skip link — first focusable element, visually hidden until focused
   Lets keyboard and screen-reader users jump past nav into <main>.
   ---------------------------------------------------------------------- */
.skip-link {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background-color: var(--primary);
  color: var(--text-primary-dark);
  font-weight: var(--weight-medium);
  font-size: var(--text-body-sm);
  border-radius: var(--radius-sm);
  text-decoration: none;
  transform: translateY(-150%);
  transition: transform var(--motion-fast) var(--easing);
  z-index: 100;
}

.skip-link:focus-visible {
  transform: translateY(0);
  outline-offset: 2px;
}

/* ----------------------------------------------------------------------
   6. Headings
   Display sizes use weight 500 (intentionally restrained — see Linear).
   Heading sizes use weight 500/600 with tighter tracking.
   Specific section headings inherit these defaults; sections may override.
   ---------------------------------------------------------------------- */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-display);
  color: var(--text-primary);
  font-weight: var(--weight-medium);
  line-height: var(--leading-heading);
}

h1 {
  font-size: var(--text-display-md);
  line-height: var(--leading-display-loose);
  letter-spacing: var(--tracking-display);
}

h2 {
  font-size: var(--text-heading-lg);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
}

h3 {
  font-size: var(--text-heading-md);
  letter-spacing: var(--tracking-heading);
}

h4 {
  font-size: var(--text-heading-sm);
  letter-spacing: var(--tracking-heading-tight);
}

h5 {
  font-size: var(--text-heading-xs);
  letter-spacing: var(--tracking-heading-tight);
}

h6 {
  font-size: var(--text-body-lg);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-heading-tight);
}

/* ----------------------------------------------------------------------
   7. Paragraphs and lists
   ---------------------------------------------------------------------- */
p {
  color: var(--text-secondary);
  font-size: var(--text-body-md);
  line-height: var(--leading-body);
  max-width: 70ch;  /* readable measure; sections may override on narrow grids */
}

p.lead {
  color: var(--text-primary);
  font-size: var(--text-body-lg);
}

ul,
ol {
  padding-left: var(--space-4);
  color: var(--text-secondary);
}

li {
  margin-bottom: var(--space-2);
}

/* ----------------------------------------------------------------------
   8. Links — primary blue, ember on hover (the rare functional ember use)
   ---------------------------------------------------------------------- */
a {
  color: var(--primary);
  text-decoration: none;
  transition: color var(--motion-fast) var(--easing);
}

a:hover {
  color: var(--ember-glow);
}

/* ----------------------------------------------------------------------
   9. Code / mono
   ---------------------------------------------------------------------- */
code,
kbd,
samp,
pre {
  font-family: var(--font-mono);
  font-size: 0.95em;
}

/* ----------------------------------------------------------------------
   10. Layout primitives — .section, .container
   - .section: vertical rhythm + dark/light surface coupling. Light variant
     adds a subtle low-opacity dot grid for AI/tech-coded texture.
   - .container: max-width content well, horizontal gutters at all sizes.
   ---------------------------------------------------------------------- */
.section {
  background-color: var(--bg);
  color: var(--text-primary);
  padding-block: var(--space-8);  /* 96px default */
  position: relative;
  overflow: hidden;  /* contains PCG ambient bleed; never clips focus rings — they offset outside */
}

@media (min-width: 1024px) {
  .section {
    padding-block: var(--space-9);  /* 128px on larger viewports */
  }
}

/* Light section variant — strategic moments only (Stats, Differentiation).
   The dot grid is the AI/tech-coded texture motif; kept at 4% alpha so it
   reads as paper, not as noise. */
.section[data-mode="light"] {
  background-color: var(--bg);
  background-image:
    radial-gradient(
      circle,
      rgba(14, 16, 20, 0.06) 1px,
      transparent 1px
    );
  background-size: 24px 24px;
  background-position: 0 0;
}

.container {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--space-5);  /* 32px gutters */
}

@media (min-width: 768px) {
  .container {
    padding-inline: var(--space-6);  /* 48px gutters from tablet up */
  }
}

/* ----------------------------------------------------------------------
   11. Eyebrow label utility
   12px UPPERCASE, +0.08em tracking. Used for section labels:
   PROBLEM / HOW IT WORKS / CAPABILITIES / FAQ.
   ---------------------------------------------------------------------- */
.eyebrow {
  display: inline-block;
  font-family: var(--font-display);
  font-size: var(--text-eyebrow);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--text-tertiary);
  margin-bottom: var(--space-3);
}

/* ----------------------------------------------------------------------
   12. Visually hidden — accessible-only content for screen readers
   ---------------------------------------------------------------------- */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}