/* File: /assets/css/core/base.css
   Owner: EC
   Purpose: Structural base styles bound to tokens; zero component opinion
   Version: 1.0
   Updated: 2025-11-06
   Notes (ALCOA-C):
     - Uses only semantic tokens from tokens.css
     - No color-mix, no gradients, no arbitrary hex
     - Typography specifics live in typography.css
     - Minimal utilities only; components get their own files
*/

/* --- 1) Box model & defaults --------------------------------- */
/* Ensure predictable sizing across the board */
html { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }

/* Fill height for sticky footers, full-height sections, etc. */
html, body { height: 100%; }

/* Bind base visuals to theme tokens */
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-body);
  font-family: var(--font-sans);
  font-size: var(--text-body-size);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Zero out default margins; rhythm is set by utilities/components */
h1,h2,h3,h4,h5,h6,p,figure { margin: 0; }

/* Media should scale with layout by default */
img, svg, video, canvas { display: block; max-width: 100%; height: auto; }

/* --- 2) Links -------------------------------------------------- */
/* No underline per spec; colors handled by themes */
a {
  color: var(--color-link);
  text-decoration: none;
}
a:hover   { color: var(--color-link-hover); }
a:visited { color: var(--color-link-visited); }

/* --- 3) Focus & accessibility --------------------------------- */
/* Strong, tokenized focus ring so removing underlines doesn't hurt a11y */
:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
  border-radius: var(--focus-radius);
}

/* “Skip to content” helper for keyboard users */
.skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
}
.skip-link:focus {
  left: 1rem;
  top: 1rem;
  z-index: var(--z-header);
  background: var(--color-surface);
  color: var(--color-body);
  padding: 0.5rem 0.75rem;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-sm);
}

/* Respect reduced motion; keep transitions effectively off */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- 4) Layout primitives ------------------------------------- */
/* Clamp page width and keep mobile gutters without media queries */
.container {
  width: min(100% - 2rem, var(--container-max));
  margin-inline: auto;
}

/* Section rhythm bound to tokens */
.section { padding-block: var(--space-section-y); }

/* --- 5) Tiny utilities (minimal, reusable) -------------------- */
/* Flow: apply top margin to any element that follows another */
.u-flow > * + * { margin-top: var(--space-4); }

/* Simple responsive grid for cards/teasers; tune min width as needed */
.u-grid {
  display: grid;
  gap: var(--grid-gap);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

/* Hide from layout AND assistive tech (use sparingly) */
.u-hidden { display: none !important; }

/* Visually hidden but announced by screen readers (modern pattern) */
.u-sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);          /* legacy fallback */
  clip-path: inset(50%);        /* modern */
  white-space: nowrap; border: 0;
}
.u-sr-only:focus,
.u-sr-only:active {
  position: static !important;
  width: auto; height: auto;
  margin: 0; overflow: visible;
  clip: auto; clip-path: none;
  white-space: normal;
}

/* Constrain long-form content for readable line length */
.u-prose { max-width: var(--content-max); }