/* =============================================================================
 * Sysculus suite — base layer
 * Reset + document defaults + accessibility baseline + layout primitives.
 * Depends on tokens.css. Everything binds a role token, never a raw value.
 * ========================================================================== */

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

html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-family-base);
  font-size: var(--type-body);
  line-height: var(--type-body-line);
  color: var(--color-text-secondary);
  background: var(--color-surface-raised);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  letter-spacing: -0.005em;
  overflow-x: hidden;           /* belt-and-braces; layouts must not overflow */
}

img, svg, video { max-width: 100%; }
img { display: block; height: auto; }
a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
  margin: 0;
  color: var(--color-text-primary);
  font-weight: var(--font-weight-bold);
  letter-spacing: -0.03em;
  line-height: 1.12;
  text-wrap: balance;
}
h1 { font-size: var(--type-h1); }
h2 { font-size: var(--type-h2); }
h3 { font-size: var(--type-h3); line-height: 1.3; }
p  { margin: 0; }

::selection { background: var(--color-accent-subtle); color: var(--color-text-primary); }

/* -----------------------------------------------------------------------------
 * Accessibility baseline
 * -------------------------------------------------------------------------- */

/* Visible focus for every keyboard-focused control. The ring binds --teal-h
 * (AA-safe), never the decorative --teal. */
:focus-visible {
  outline: 2px solid var(--color-state-focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Skip-to-content — visually hidden until focused. */
.skip-link {
  position: absolute;
  left: var(--space-2);
  top: -100%;
  z-index: var(--z-toast);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-surface-raised);
  color: var(--color-text-link);
  font-weight: var(--font-weight-semibold);
  box-shadow: var(--elevation-2);
  transition: top var(--motion-duration-fast) var(--motion-easing-standard);
}
.skip-link:focus { top: var(--space-2); }

/* Off-screen text 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;
}

/* -----------------------------------------------------------------------------
 * Layout primitives
 * -------------------------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--size-page-max);
  margin-inline: auto;
  padding-inline: var(--space-6);
}
.wrap--narrow { max-width: 780px; }

.section { padding-block: var(--space-24); }
.section--tight { padding-block: var(--space-16); }
.section--sunken { background: var(--color-surface-canvas); }

/* Ambient wash — the light-mode cousin of the dark band's aurora. Gives a
 * section depth instead of flat white. Decorative only, sits behind content. */
.section--glow { position: relative; overflow: hidden; isolation: isolate; }
.section--glow::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--wash-teal), var(--wash-violet), var(--wash-cyan);
}
/* Hairline gradient divider between stacked sections */
.section--edge { border-top: 1px solid transparent;
  border-image: linear-gradient(90deg, transparent, var(--color-accent-subtle-border), transparent) 1; }

/* Centered section header */
.kicker { max-width: 720px; margin: 0 auto var(--space-12); text-align: center; }
.kicker h2 { margin-top: var(--space-3); }
.kicker p { margin-top: var(--space-4); color: var(--color-text-muted); font-size: var(--type-lead); }

.lead { font-size: var(--type-lead); color: var(--color-text-muted); }
.muted { color: var(--color-text-muted); }

/* Grids */
.grid { display: grid; gap: var(--space-6); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 960px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 820px) { .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .section { padding-block: var(--space-16); }
}

/* Scroll-reveal (progressively enhanced by site.js; visible if JS is off) */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--motion-duration-slow) var(--motion-easing-standard),
              transform var(--motion-duration-slow) var(--motion-easing-standard);
}
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
}
/* If JS never runs, never leave content invisible. */
.no-js .reveal { opacity: 1; transform: none; }