/*
 * Reset, global typography, and accessibility primitives shared by every
 * component. Component stylesheets should only need tokens.css + this file
 * to build on top of — no re-declared resets, no ad hoc focus styling.
 */

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

/* Many components below set their own `display` (flex/grid) and are also
   toggled via the [hidden] attribute (app.js sets/clears it, Phase 10). A
   component's own `display: flex` would otherwise beat the UA stylesheet's
   `[hidden] { display: none }` on a cascade-origin tie, silently showing
   "hidden" elements — this guarantees [hidden] always wins. */
[hidden] {
  display: none !important;
}

html {
  color-scheme: dark;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  /* 16px, matching the reference's real body size — deliberately not
     var(--text-base) (14px), which stays the compact size used throughout
     the functional workspace/drawer UI (dropzone, queue rows, mode cards),
     unaffected by this marketing-content-scale change. */
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
}

h1,
h2,
h3 {
  font-family: var(--font-heading);
  margin: 0;
  letter-spacing: -0.04em;
}

h1 {
  font-size: clamp(2.85rem, 5.4vw, 5.1rem);
  line-height: 0.95;
  font-weight: 800;
}

h2 {
  font-size: clamp(2rem, 3.65vw, 3.2rem);
  line-height: 1.05;
  font-weight: 760;
}

h3 {
  font-size: 1rem;
  line-height: 1.24;
  font-weight: 700;
}

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

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

/* Midnight Indigo design migration: links inherit their container's text
   color by default (matching the reference exactly) — every interactive
   link that should actually be accent-colored (nav items, footer links,
   text-link CTAs, etc.) already sets its own explicit color/hover rule in
   header.css/sections.css, so this only changes elements that had no such
   rule (the header/footer brand logo text, previously bleeding purple from
   the old global default — found via live visual comparison against the
   reference file, not merely inferred). */
a {
  color: inherit;
  text-decoration: none;
}

p {
  color: var(--t2);
}

ul,
ol {
  list-style: none;
}

/* h1/h2/h3 deliberately excluded here — they get real weight values from
   the heading-typography rule below (800/760/700 matching the reference);
   this reset previously silently clobbered those via source order (same
   specificity, later rule wins) whenever a component didn't carry its own
   more-specific weight override, e.g. any bare <h2> without a class. */
h4,
p {
  font-weight: inherit;
}

/* Every interactive element gets the same visible focus treatment — never
   suppressed, per plan §14/§46 (keyboard navigation, visible focus). */
:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

button {
  background: none;
  border: none;
  cursor: pointer;
}

/* Visually hides content while keeping it in the accessibility tree — used
   for skip links and screen-reader-only status text. */
.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;
}

.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-4);
  z-index: var(--z-toast);
  background: var(--accent2);
  color: white;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: var(--text-sm);
  transition: top var(--transition-fast);
}

.skip-link:focus {
  top: var(--space-3);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Scroll-triggered fade-up, applied to marketing-section content (reveal.js).
   Content is never hidden from assistive tech or from JS-disabled browsers —
   only opacity/transform animate, nothing toggles `hidden` or removes it
   from the accessibility tree. */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}

.reveal.in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
  }
}

/* -- Shared layout primitives ------------------------------------------- */

/* Matches the reference's own responsive formula exactly: a fixed 1240px
   cap on wide viewports (with no extra inline padding needed there — the
   viewport itself provides the margin), shrinking to a uniform 24px-each-
   side margin below that via calc(), rather than a separate fixed
   max-width + padding-inline combination that adds an unwanted extra
   ~32px of padding per side at desktop widths (confirmed via computed-
   style comparison against the reference). */
.container {
  width: min(var(--container-content), calc(100% - var(--container-margin)));
  margin-inline: auto;
}

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

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


.section {
  position: relative;
  padding-block: 104px;
  overflow: hidden;
}

/* .section-heading is just a marker class now — h2's own font-size/weight/
   line-height/letter-spacing come from the shared h1,h2,h3 rule + the h2
   rule below, matching the reference exactly rather than a separate,
   smaller override scale. */
.section-heading {
  color: var(--text);
}

.section-subheading {
  max-width: 720px;
  margin: 16px auto 0;
  font-size: 0.98rem;
}

.section-header {
  max-width: 820px;
  margin: 0 auto 42px;
  text-align: center;
}

@media (max-width: 820px) {
  :root {
    --container-margin: 28px;
  }

  .section {
    padding-block: 84px;
  }
}

/* -- Shared button styles ------------------------------------------------ */

.btn {
  min-height: 46px;
  padding: 0 17px;
  border-radius: 13px;
  border: 1px solid transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-family: inherit;
  font-weight: 750;
  cursor: pointer;
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), background 0.2s var(--ease),
    border-color 0.2s var(--ease), color 0.2s var(--ease);
  white-space: nowrap;
}

.btn:hover:not(:disabled) {
  transform: translateY(-2px);
}

.btn:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.btn svg {
  width: 17px;
  height: 17px;
}

.btn-primary {
  color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  box-shadow: 0 14px 34px color-mix(in srgb, var(--accent) 24%, transparent);
}

.btn-primary:hover:not(:disabled) {
  box-shadow: 0 18px 46px color-mix(in srgb, var(--accent) 31%, transparent);
}

.btn-secondary {
  color: var(--text);
  background: color-mix(in srgb, var(--surf) 76%, transparent);
  border-color: var(--brd);
}

.btn-secondary:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--brd));
}

.btn-ghost {
  background: none;
  border: 1px solid var(--brd);
  color: var(--t3);
  padding: 5px 12px;
  font-size: var(--text-xs);
  font-weight: 600;
  border-radius: var(--radius-sm);
}

.btn-ghost:hover:not(:disabled) {
  color: var(--err);
  border-color: var(--err);
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 20px;
  background: var(--accent-a);
  border: 1px solid var(--brd2);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.5px;
}

.badge-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ok);
}

/* -- Spotlight hover system (mouse-follow inner border/glow) -------------- */
/* Applied via the .spotlight class (spotlight.js sets --mx/--my on
   pointermove); the glow is entirely inside the element via `overflow:
   hidden` + `isolation:isolate`, never leaking outside its own border. Both
   pseudo-elements sit under the element's real content (z-index 0/1 vs the
   content wrapper's 2) so they never intercept clicks. */
.spotlight {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.spotlight::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(
    380px circle at var(--mx, 50%) var(--my, 50%),
    color-mix(in srgb, var(--accent) 13%, transparent),
    transparent 45%
  );
  opacity: 0;
  transition: opacity 0.18s var(--ease);
  z-index: 0;
}

.spotlight::after {
  content: '';
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(
    220px circle at var(--mx, 50%) var(--my, 50%),
    color-mix(in srgb, var(--accent) 85%, white 5%) 0%,
    color-mix(in srgb, var(--accent) 35%, transparent) 28%,
    transparent 58%
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.18s var(--ease);
  z-index: 1;
}

.spotlight:hover::before,
.spotlight:hover::after,
.spotlight:focus-within::before,
.spotlight:focus-within::after {
  opacity: 1;
}

.spotlight > * {
  position: relative;
  z-index: 2;
}

@media (prefers-reduced-motion: reduce) {
  .spotlight::before,
  .spotlight::after {
    transition: none;
  }
}