/* ==========================================================================
   Base — reset, surfaces, layout primitives, surface-aware focus
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-block-start: calc(var(--header-h) + var(--space-3));
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  background: var(--color-obsidian);
  color: var(--text-primary-on-dark);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

img, svg { display: block; max-width: 100%; }
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
a { color: inherit; }
button { font: inherit; color: inherit; }

/* ---- Surfaces: every section declares one. Sets text + focus colour. ---- */
.surface-dark {
  --surface-bg: var(--color-obsidian);
  --surface-text: var(--text-primary-on-dark);
  --surface-text-2: var(--text-secondary-on-dark);
  --surface-link: var(--link-on-dark);
  --surface-border: var(--border-on-dark);
  --focus-ring: var(--focus-ring-on-dark);
  background: var(--surface-bg);
  color: var(--surface-text);
}
.surface-dark--raised { --surface-bg: var(--color-surface-dark); }

.surface-light {
  --surface-bg: var(--color-light);
  --surface-text: var(--text-primary-on-light);
  --surface-text-2: var(--text-secondary-on-light);  /* NOT muted on Light */
  --surface-link: var(--link-on-light);
  --surface-border: var(--border-on-light);
  --focus-ring: var(--focus-ring-on-light);
  background: var(--surface-bg);
  color: var(--surface-text);
}
.surface-white {
  --surface-bg: var(--color-white);
  --surface-text: var(--text-primary-on-light);
  --surface-text-2: var(--text-muted-on-white);      /* permitted on White only */
  --surface-link: var(--link-on-light);
  --surface-border: var(--border-on-light);
  --focus-ring: var(--focus-ring-on-light);
  background: var(--surface-bg);
  color: var(--surface-text);
}

/* ---- Surface-aware focus: separated / offset geometry (Handoff §14) ---- */
:focus { outline: none; }
:focus-visible {
  outline: var(--focus-width) solid var(--focus-ring, var(--focus-ring-on-dark));
  outline-offset: var(--focus-offset);
  border-radius: var(--radius-sm);
}

/* ---- Layout primitives ---- */
.container {
  width: 100%;
  max-width: calc(var(--container-max) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section { padding-block: var(--section-pad); }

/* ---- Utilities ---- */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}
/* Latin runs inside RTL text (ZENNTAC, technical terms, URLs) */
.latin, bdi { unicode-bidi: isolate; }
/* Email / phone / URLs always LTR (Handoff §5, §17) */
.ltr { direction: ltr; unicode-bidi: isolate; }

/* ---- Skip link (G-04) ---- */
.skip-link {
  position: absolute;
  inset-inline-start: var(--space-3);
  inset-block-start: -100px;
  z-index: 100;
  padding: var(--space-2) var(--space-3);
  background: var(--color-white);
  color: var(--color-dark-text);
  font-weight: 600;
  border-radius: var(--radius-sm);
  text-decoration: none;
  --focus-ring: var(--focus-ring-on-dark);
}
.skip-link:focus-visible { inset-block-start: var(--space-3); }

::selection { background: var(--color-dark-violet); color: var(--color-white); }