/* Shared layer. Identical on every site. Maintained once.
   Skins may override only: colors, font families, --text-base, --leading-body,
   heading/hero weight and size, --density, --radius, link, nav, card and label tokens. */

:root, [data-skin] {
  /* Spacing scale (px, fixed) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* Type scale: one ratio for every skin (major third). Skins set --text-base. */
  --ratio: 1.25; /* @kind other */
  --text-base: 17px;
  --leading-body: 1.6;
  --leading-tight: 1.2;
  --step--1: calc(var(--text-base) / 1.25);
  --step-0: var(--text-base);
  --step-1: calc(var(--text-base) * 1.25);
  --step-2: calc(var(--text-base) * 1.5625);
  --step-3: calc(var(--text-base) * 1.953);
  --step-4: calc(var(--text-base) * 2.441);
  --step-5: calc(var(--text-base) * 3.052);

  /* Grid and measure */
  --measure: 70ch;
  --measure-narrow: 52ch;
  --margin-col: 11rem;
  --margin-col: 11rem;
  --zone-gap: var(--space-7);
  --page-max: calc(var(--margin-col) + var(--zone-gap) + var(--measure));
  --gutter: clamp(20px, 5vw, 48px); /* @kind spacing */
  --columns: 12; /* @kind other */
  --column-gap: var(--space-5);

  /* Vertical rhythm: fixed for every site. Density scales in-section spacing only. */
  --density: 1; /* @kind other */
  --section-space: clamp(64px, 24px + 5vw, 96px);
  --block-space: calc(var(--space-6) * var(--density));

  /* Hairlines, never boxes */
  --rule: 1px;
  --radius: 0px;

  /* Focus ring geometry: outline, never a color change alone */
  --focus-width: 3px;
  --focus-offset: 3px;
  --focus: var(--accent);

  /* Touch targets */
  --target-min: 44px;

  /* Motion: color and underline only. Zeroed under reduced motion. */
  --duration: 120ms; /* @kind other */
  --easing: cubic-bezier(0.2, 0, 0, 1); /* @kind other */

  /* Semantic aliases (every skin resolves these) */
  --text: var(--ink);
  --text-secondary: var(--muted);
  --surface: var(--paper);
  --control-border: var(--muted);
  --on-accent: var(--paper);
  --footer-size: var(--step--1);
}

@media (prefers-reduced-motion: reduce) {
  :root, [data-skin] { --duration: 0ms; /* @kind other */ }
}

/* Breakpoints (documented; CSS custom properties cannot drive media queries):
   narrow < 640px, medium 640-1023px, wide >= 1024px. Single column below 640px. */