/* ==========================================================================
   whitepage base layer — invisible scaffolding only
   --------------------------------------------------------------------------
   Vendored token + layout primitives shared by every generated site. This
   file is structural ONLY: spacing scale, type scale, container width, a
   small set of layout utilities, a reset, and vertical rhythm.

   It deliberately defines NO colors and NO concrete font families — those are
   the renderer's per-run job (palette = DS-2, type pairing = DS-6). Keeping
   this file colorless/typeface-less means it never fights the palette lint
   and never imposes a recognizable framework "look" (DS-8).

   Rules for the renderer:
     1. Copy this file VERBATIM into the site (e.g. assets/base.css) and link
        it FIRST, before the run's theme stylesheet.
     2. Build the run's aesthetics ON TOP of these tokens (set colors, pick
        the font pairing, map them onto --font-sans / --font-serif).
     3. NEVER edit this file. Override via your own cascade, not by mutation.
   ========================================================================== */

/* --- Tokens ------------------------------------------------------------- */
:root {
  /* 4px-based spacing scale — use these everywhere instead of ad-hoc px */
  --space-3xs: 0.25rem;  /*  4px */
  --space-2xs: 0.5rem;   /*  8px */
  --space-xs:  0.75rem;  /* 12px */
  --space-sm:  1rem;     /* 16px */
  --space-md:  1.5rem;   /* 24px */
  --space-lg:  2rem;     /* 32px */
  --space-xl:  3rem;     /* 48px */
  --space-2xl: 4rem;     /* 64px */
  --space-3xl: 6rem;     /* 96px */
  --space-4xl: 8rem;     /* 128px */

  /* Modular type scale (~1.25 minor third), fluid where it helps reading */
  --text-xs:   0.8rem;
  --text-sm:   0.9rem;
  --text-base: clamp(1.0625rem, 1rem + 0.3vw, 1.125rem); /* ~17–18px body */
  --text-lg:   1.25rem;
  --text-xl:   1.563rem;
  --text-2xl:  1.953rem;
  --text-3xl:  clamp(2.25rem, 1.8rem + 2vw, 2.441rem);
  --text-4xl:  clamp(2.75rem, 2rem + 3.5vw, 3.815rem);

  /* Line-heights */
  --leading-tight:   1.15;
  --leading-snug:    1.3;
  --leading-normal:  1.65;  /* generous, for body reading */

  /* Reading measure / page container widths */
  --measure: 68ch;          /* article body — a proper read, not full column */
  --container: 72rem;       /* outer page max-width (homepage/lists) */
  --container-narrow: 42rem;

  /* Radii + border width tokens (color is set by the theme) */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 1rem;
  --border-width: 1px;

  /* Font role variables — the THEME assigns real faces to these.
     Left empty here on purpose so this file ships no typeface. */
  --font-sans: ;
  --font-serif: ;
}

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

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  min-height: 100vh;
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

input,
button,
textarea,
select {
  font: inherit;
}

button {
  cursor: pointer;
  background: none;
  border: none;
}

a {
  color: inherit;
  text-decoration-thickness: 0.06em;
  text-underline-offset: 0.15em;
}

ul[role="list"],
ol[role="list"] {
  list-style: none;
  padding: 0;
}

p,
h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

/* --- Vertical rhythm ---------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  line-height: var(--leading-tight);
  font-weight: 600;
}

h1 { font-size: var(--text-4xl); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl); }
h5 { font-size: var(--text-lg); }

/* Flow spacing: consistent gaps between stacked content without per-element
   margins. Apply `.flow` (or .prose) to a container of block content. */
.flow > * + *,
.prose > * + * {
  margin-block-start: var(--space-md);
}

.prose > * + :is(h2, h3, h4) {
  margin-block-start: var(--space-xl);
}

.prose :is(h2, h3, h4) + * {
  margin-block-start: var(--space-sm);
}

.prose {
  max-width: var(--measure);
  line-height: var(--leading-normal);
}

/* --- Layout primitives -------------------------------------------------- */
/* Centered page container with a responsive inline gutter. */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--space-md);
}

.container--narrow {
  max-width: var(--container-narrow);
}

@media (min-width: 768px) {
  .container {
    padding-inline: var(--space-xl);
  }
}

/* Vertical stack with a configurable gap (default md). */
.stack {
  display: flex;
  flex-direction: column;
  gap: var(--stack-gap, var(--space-md));
}

/* Horizontal cluster that wraps gracefully (nav, tag rows, button rows). */
.cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cluster-gap, var(--space-sm));
}

/* Auto-fit responsive grid — cards reflow with no media queries needed.
   Tune the minimum column width per use with --grid-min. */
.grid {
  display: grid;
  gap: var(--grid-gap, var(--space-lg));
  grid-template-columns: repeat(
    auto-fit,
    minmax(min(var(--grid-min, 18rem), 100%), 1fr)
  );
}

/* Push a footer to the bottom; main fills remaining height. */
.page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.page > main {
  flex: 1 0 auto;
}

/* Vertical section padding token for major page bands. */
.section {
  padding-block: var(--section-pad, var(--space-2xl));
}

/* Visually hidden but accessible (skip links, labels). */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --- Motion safety ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}