/* ==========================================================================
   Zyntel prototype — BASE
   Reset · typography roles · layout primitives · section rhythm ·
   reveal · placeholder markers. Tokens only (tokens.css).
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--zy-nav-height) + var(--zy-space-4));
}

body {
  margin: 0;
  font-family: var(--zy-font-sans);
  font-size: var(--zy-type-body-md-size);
  line-height: var(--zy-type-body-md-lh);
  color: var(--zy-color-text-primary);
  background: var(--zy-color-surface-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
body.is-locked { overflow: hidden; }

h1, h2, h3, h4, h5, p, ul, ol, dl, dd, dt, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: inherit; }

h1, h2, h3, blockquote p { text-wrap: balance; }

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

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

.skip-link {
  position: absolute; left: var(--zy-space-4); top: -100px; z-index: 100;
  padding: var(--zy-space-3) var(--zy-space-4);
  background: var(--zy-color-surface-page); color: var(--zy-color-text-signal);
  border: var(--zy-border-hairline) solid var(--zy-color-border-signal);
  border-radius: var(--zy-radius-full); font-weight: var(--zy-font-weight-medium);
}
.skip-link:focus { top: var(--zy-space-3); }

.noscript { padding: var(--zy-space-8) var(--zy-grid-margin); color: var(--zy-color-text-secondary); }

/* ---------------------------------------------------------------- Type roles */
/* Brand face on every display / heading / eyebrow role and on bare headings. */
.t-hero, .t-display-1, .t-display-2, .t-display-3,
.t-heading-1, .t-heading-2, .t-heading-3, .t-heading-4, .t-heading-5,
.t-label, h1, h2, h3 { font-family: var(--zy-font-display); font-feature-settings: "kern" 1; text-rendering: optimizeLegibility; }
.t-hero, .t-display-1, .t-display-2, .t-display-3, .t-heading-1, .t-heading-2 { text-wrap: balance; }
.t-hero { font-size: var(--zy-type-hero-size); line-height: var(--zy-type-hero-lh); letter-spacing: var(--zy-tracking-hero); font-weight: var(--zy-font-weight-display); }
.t-display-1 { font-size: var(--zy-type-display-1-size); line-height: var(--zy-type-display-1-lh); letter-spacing: var(--zy-tracking-display-1); font-weight: var(--zy-font-weight-display); }
.t-display-2 { font-size: var(--zy-type-display-2-size); line-height: var(--zy-type-display-2-lh); letter-spacing: var(--zy-tracking-display-2); font-weight: var(--zy-font-weight-display); }
.t-display-3 { font-size: var(--zy-type-display-3-size); line-height: var(--zy-type-display-3-lh); letter-spacing: var(--zy-tracking-display-3); font-weight: var(--zy-font-weight-display); }
.t-heading-1 { font-size: var(--zy-type-heading-1-size); line-height: var(--zy-type-heading-1-lh); letter-spacing: var(--zy-tracking-heading-1); font-weight: var(--zy-font-weight-medium); }
.t-heading-2 { font-size: var(--zy-type-heading-2-size); line-height: var(--zy-type-heading-2-lh); letter-spacing: var(--zy-tracking-heading-2); font-weight: var(--zy-font-weight-medium); }
.t-heading-3 { font-size: var(--zy-type-heading-3-size); line-height: var(--zy-type-heading-3-lh); letter-spacing: var(--zy-tracking-heading-3); font-weight: var(--zy-font-weight-medium); }
.t-heading-4 { font-size: var(--zy-type-heading-4-size); line-height: var(--zy-type-heading-4-lh); letter-spacing: var(--zy-tracking-heading-4); font-weight: var(--zy-font-weight-medium); }
.t-heading-5 { font-size: var(--zy-type-heading-5-size); line-height: var(--zy-type-heading-5-lh); font-weight: var(--zy-font-weight-medium); }
.t-body-lg { font-size: var(--zy-type-body-lg-size); line-height: var(--zy-type-body-lg-lh); }
.t-body-md { font-size: var(--zy-type-body-md-size); line-height: var(--zy-type-body-md-lh); }
.t-body-sm { font-size: var(--zy-type-body-sm-size); line-height: var(--zy-type-body-sm-lh); }
.t-caption { font-size: var(--zy-type-caption-size); line-height: var(--zy-type-caption-lh); letter-spacing: 0.01em; }
.t-label { font-size: var(--zy-type-label-size); line-height: var(--zy-type-label-lh); letter-spacing: var(--zy-tracking-label); text-transform: uppercase; font-weight: var(--zy-font-weight-label); }
.t-tabular { font-variant-numeric: tabular-nums; }

.c-secondary { color: var(--zy-color-text-secondary); }
.c-tertiary { color: var(--zy-color-text-tertiary); }
.c-signal, .signal { color: var(--zy-color-text-signal); }

/* ---------------------------------------------------------- Layout (§6, §7) */
.container {
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--zy-grid-margin);
  max-width: calc(var(--zy-container-wide) + 2 * var(--zy-grid-margin));
}
.container--full { max-width: calc(var(--zy-container-full) + 2 * var(--zy-grid-margin)); }
.container--reading { max-width: calc(var(--zy-container-reading) + 2 * var(--zy-grid-margin)); }

.grid {
  display: grid;
  grid-template-columns: repeat(var(--zy-grid-columns), minmax(0, 1fr));
  column-gap: var(--zy-grid-gutter);
}
.grid > * { grid-column: 1 / -1; min-width: 0; }

/* span = end only, so start utilities compose correctly (validation finding F2) */
@media (min-width: 48em) {
  .md-span-4 { grid-column: auto / span 4; }
  .md-span-8 { grid-column: 1 / -1; }
}
@media (min-width: 64em) {
  .lg-span-3 { grid-column: auto / span 3; }
  .lg-span-4 { grid-column: auto / span 4; }
  .lg-span-5 { grid-column: auto / span 5; }
  .lg-span-6 { grid-column: auto / span 6; }
  .lg-span-7 { grid-column: auto / span 7; }
  .lg-span-8 { grid-column: auto / span 8; }
  .lg-span-9 { grid-column: auto / span 9; }
  .lg-start-6 { grid-column-start: 6; }
  .lg-start-7 { grid-column-start: 7; }
  .lg-start-9 { grid-column-start: 9; }
  .lg-start-10 { grid-column-start: 10; }
}

/* ----------------------------------------------------------- Section rhythm */
.section {
  position: relative;
  padding-block: var(--zy-layout-section-space-md);
}
.section--subtle { background: var(--zy-color-surface-subtle); }

/* Thin technical section marker — index · rule · name */
.section-marker {
  display: flex;
  align-items: center;
  gap: var(--zy-space-3);
  margin-bottom: var(--zy-layout-stack-lg);
  color: var(--zy-color-text-secondary);
}
.section-marker__index { color: var(--zy-color-text-signal); }
.section-marker__rule { width: var(--zy-space-8); min-width: var(--zy-space-4); flex-shrink: 1; height: 1px; background: var(--zy-color-border-strong); }
.section-marker > :last-child { white-space: nowrap; }

.section-head { row-gap: var(--zy-layout-stack-lg); margin-bottom: var(--zy-layout-header-to-body); }
.section-head__aside { display: flex; flex-direction: column; align-items: flex-start; gap: var(--zy-space-4); }
@media (min-width: 64em) {
  .section-head { align-items: end; }
}
.section-head--split { display: flex; flex-direction: column; gap: var(--zy-layout-stack-lg); }
@media (min-width: 48em) {
  .section-head--split { flex-direction: row; justify-content: space-between; align-items: flex-end; }
}

/* ----------------------------------------------------------------- Reveal */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity var(--zy-motion-duration-story) var(--zy-motion-easing-enter),
    transform var(--zy-motion-duration-story) var(--zy-motion-easing-enter);
}
.js [data-reveal].is-visible { opacity: 1; transform: none; }

/* ------------------------------------------ Placeholder markers (§20.6) */
html[data-markers="on"] [data-status="placeholder"] {
  outline: 1px dashed var(--zy-color-border-signal);
  outline-offset: 3px;
}
html[data-markers="on"] [data-status="placeholder"]:hover::after {
  content: attr(data-slot);
  position: fixed;
  left: var(--zy-space-4);
  bottom: calc(var(--zy-space-4) + 3.25rem);
  z-index: 90;
  max-width: calc(100vw - 2 * var(--zy-space-4));
  padding: var(--zy-space-1) var(--zy-space-3);
  font: var(--zy-font-weight-medium) var(--zy-type-caption-size) / var(--zy-type-caption-lh) var(--zy-font-sans);
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--zy-color-neutral-0);
  background: var(--zy-color-brand-700);
  border-radius: var(--zy-radius-sm);
  pointer-events: none;
}

/* ---------------------------------------------------- Reduced motion (§23.4) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0ms !important;
    animation-duration: 0ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
  .js [data-reveal] { opacity: 1; transform: none; }
}

/* Brand text selection */
::selection { background: var(--zy-color-brand-100); color: var(--zy-color-brand-950); }

/* Light seam divider: a hairline + soft blush at the top of a section that fades
   to white over 30rem. Marks a hand-off between white sections without
   breaking the 60% white rule. (Same treatment as hero → next section.) */
.section--seam {
  background: var(--zy-color-surface-page) linear-gradient(to bottom, var(--zy-color-brand-50) 0, var(--zy-color-brand-50) 10rem, var(--zy-color-surface-page) 30rem) no-repeat;
  border-top: var(--zy-border-hairline) solid var(--zy-color-brand-100);
}