/* CORE TIER — the immutable identity: type scale, rhythm, spacing,
 * widths, radius, motion, z-index, plus the typography utilities that
 * consume them. Overriding anything here = forking Remarque. */
:root{
  /* Type scale — fluid where it matters, fixed where it doesn't */
  --text-display: clamp(2.75rem, 5.5vw, 5rem);
  --text-title: clamp(1.875rem, 3.5vw, 3rem);
  --text-section: clamp(1.375rem, 2.25vw, 2rem);
  --text-body-lg: 1.1875rem;    /* 19px — lead paragraphs */
  --text-body: 1.0625rem;       /* 17px — minimum body size, non-negotiable */
  --text-meta: 0.875rem;        /* 14px — USWDS minimum for small text */
  --text-micro: 0.8125rem;      /* 13px — timestamps only */

  /* Line heights */
  --leading-display: 1.05;
  --leading-title: 1.15;
  --leading-section: 1.2;
  --leading-body: 1.75;
  --leading-meta: 1.5;

  /* Letter spacing */
  --tracking-display: -0.02em;
  --tracking-title: -0.015em;
  --tracking-body: 0em;
  --tracking-meta: 0.02em;
  --tracking-caps: 0.06em;

  /* Font weights */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;

  /* Spacing scale — deliberately generous */
  --space-1: 0.25rem;   /* 4 */
  --space-2: 0.5rem;    /* 8 */
  --space-3: 0.75rem;   /* 12 */
  --space-4: 1rem;      /* 16 */
  --space-5: 1.5rem;    /* 24 */
  --space-6: 2rem;      /* 32 */
  --space-7: 3rem;      /* 48 */
  --space-8: 4rem;      /* 64 */
  --space-9: 6rem;      /* 96 — minimum top padding before main heading */
  --space-10: 8rem;     /* 128 */
  --space-11: 10rem;    /* 160 */
  --space-12: 12rem;    /* 192 */

  /* Layout widths (--content-reading is palette tier: it moves with the body font) */
  --content-standard: 72rem;   /* ~1152px */
  --content-wide: 88rem;       /* ~1408px */

  /* Radius — restrained */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;         /* maximum for any component */
  --radius-none: 0;

  /* Borders */
  --border-width: 1px;
  --border-style: solid; /* @kind other */

  /* Motion — minimal, functional only */
  --motion-fast: 120ms; /* @kind other */        /* hover, focus */
  --motion-normal: 180ms; /* @kind other */      /* theme transitions */
  --motion-easing: ease-out; /* @kind other */

  /* Z-index — structural, never a bare number in consumer CSS */
  --z-base: 0; /* @kind other */
  --z-sticky: 10; /* @kind other */
  --z-dropdown: 20; /* @kind other */
  --z-overlay: 30; /* @kind other */
  --z-modal: 40; /* @kind other */
  --z-toast: 50; /* @kind other */
  --z-skip-link: 60; /* @kind other */
}

@media (prefers-reduced-motion: reduce){
  :root,[data-theme="light"],[data-theme="dark"]{--motion-fast:0ms; /* @kind other */ --motion-normal:0ms /* @kind other */}
}

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

html{font-family:var(--font-body);font-size:100%;line-height:var(--leading-body);color:var(--color-fg);background-color:var(--color-bg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
::selection{background-color:var(--color-selection-bg);color:var(--color-selection-fg)}

/* ── Typography utilities ── */
.text-display{font-family:var(--font-display);font-size:var(--text-display);line-height:var(--leading-display);letter-spacing:var(--tracking-display);font-weight:var(--weight-display,var(--weight-regular))}
.text-title{font-family:var(--font-display);font-size:var(--text-title);line-height:var(--leading-title);letter-spacing:var(--tracking-title);font-weight:var(--weight-display,var(--weight-regular))}
.text-section{font-family:var(--font-display);font-size:var(--text-section);line-height:var(--leading-section);letter-spacing:var(--tracking-title);font-weight:var(--weight-medium)}
.text-display,.text-title,.text-section{text-wrap:balance;font-optical-sizing:auto;font-synthesis:none}
.text-body{font-family:var(--font-body);font-size:var(--text-body);line-height:var(--leading-body);letter-spacing:var(--tracking-body);font-weight:var(--weight-regular)}
.text-body-lg{font-family:var(--font-body);font-size:var(--text-body-lg);line-height:var(--leading-body);letter-spacing:var(--tracking-body);font-weight:var(--weight-regular)}
/* Tabular lining numerals: dates/counts never jitter */
.text-meta{font-family:var(--font-mono);font-size:var(--text-meta);line-height:var(--leading-meta);letter-spacing:var(--tracking-meta);font-weight:var(--weight-regular);color:var(--color-muted);font-variant-numeric:tabular-nums lining-nums}
/* True small caps — never text-transform: uppercase */
.text-label{font-family:var(--font-mono);font-size:var(--text-meta);line-height:var(--leading-meta);font-variant-caps:all-small-caps;letter-spacing:var(--tracking-caps);color:var(--color-muted)}

.font-display{font-family:var(--font-display)}
.font-body{font-family:var(--font-body)}
.font-mono{font-family:var(--font-mono)}

.content-reading{max-width:var(--content-reading);margin-inline:auto}
.content-standard{max-width:var(--content-standard);margin-inline:auto}
.content-wide{max-width:var(--content-wide);margin-inline:auto}

:focus-visible{outline:2px solid var(--color-focus-ring);outline-offset:2px;border-radius:var(--radius-sm);transition:outline-color var(--motion-fast) var(--motion-easing)}
@media (forced-colors: active){:focus-visible{outline-color:Highlight}}