/* =============================================================================
   KONNECT HOUSE — shared foundation tokens and laws        kh-tokens/1
   2026-09-19 · nowthatskee.com · konnectmusicgroup.com · 5oceansrestaurant.com

   Load order: this file FIRST, then the brand /styles.css.
   Brand palettes, fonts, and room layout stay in styles.css. This file is the
   same bytes in all three repos; check with `npm run tokens:check`.

   Contents:
     1. spacing      --kh-space-*, gutter, section rhythm, tap target
     2. type         --kh-text-*, leading, tracking, measure
     3. image/media  --kh-img-max, ratios, radii
     4. motion/safety
     5. THE OVERFLOW KILL — html/body overflow-x clip, img max-width 100%
     6. component patterns (.kh-*)
   ============================================================================= */

:root {
  /* 1. spacing -------------------------------------------------------------- */
  --kh-space-0: 0;
  --kh-space-1: 0.25rem;
  --kh-space-2: 0.5rem;
  --kh-space-3: 0.75rem;
  --kh-space-4: 1rem;
  --kh-space-5: 1.5rem;
  --kh-space-6: 2rem;
  --kh-space-7: 3rem;
  --kh-space-8: 4.5rem;
  --kh-space-9: 6rem;
  --kh-gutter: clamp(1.15rem, 3.4vw, 2.8rem);
  --kh-section-y: clamp(3rem, 7vw, 6rem);
  --kh-max: 74rem;
  --kh-tap: 44px;
  --kh-bar-h: 3.6rem;

  /* 2. type ----------------------------------------------------------------- */
  --kh-font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display",
    "SF Pro Text", system-ui, "Segoe UI", sans-serif;
  --kh-text-xs: 0.75rem;
  --kh-text-sm: 0.875rem;
  --kh-text-base: clamp(1.03rem, 0.35vw + 0.98rem, 1.125rem);
  --kh-text-lede: clamp(1.12rem, 1.45vw, 1.28rem);
  --kh-text-h3: clamp(1.4rem, 2.2vw, 1.85rem);
  --kh-text-h2: clamp(1.8rem, 3.4vw, 2.75rem);
  --kh-text-h1: clamp(2.7rem, 6.2vw, 5.15rem);
  --kh-leading-tight: 1.1;
  --kh-leading-body: 1.7;
  --kh-tracking-tight: -0.011em;
  --kh-measure: 68ch;

  /* 3. image / media -------------------------------------------------------- */
  --kh-img-max: 100%;
  --kh-media-radius: 28px;
  --kh-radius-pill: 999px;
  --kh-ratio-wide: 16 / 9;
  --kh-ratio-square: 1 / 1;
  --kh-ratio-portrait: 4 / 5;
  --kh-ratio-tall: 3 / 4;

  /* 4. motion / safety ------------------------------------------------------ */
  --kh-dur: 200ms;
  --kh-ease: ease-out;
  --kh-safe-t: env(safe-area-inset-top, 0px);
  --kh-safe-r: env(safe-area-inset-right, 0px);
  --kh-safe-b: env(safe-area-inset-bottom, 0px);
  --kh-safe-l: env(safe-area-inset-left, 0px);
}

/* =============================================================================
   5. THE OVERFLOW KILL — the "no ice-rink" law
   A page must never scroll sideways. `overflow-x: clip` contains accidental
   wide children WITHOUT turning the element into a scroll container (unlike
   `hidden`, clip does not create a new scrollport, so position: sticky above
   it keeps working). Media is capped at its container. The regression harness
   `scripts/mobile-regression.sh` fails when documentElement.scrollWidth
   is not innerWidth at 320 / 375 / 414, or when css/html use a full-viewport width unit.
   ============================================================================= */

html,
body {
  max-width: 100%;
  overflow-x: clip;
}

img,
video,
svg {
  max-width: var(--kh-img-max);
  height: auto;
}
video,
canvas,
iframe { max-width: var(--kh-img-max); }
iframe { border: 0; }
table { max-width: 100%; }

/* Long unbroken strings, URLs, and model names must not push the layout. */
h1, h2, h3, h4, h5, h6, p, li, a, blockquote, figcaption, dd, dt, button, label {
  overflow-wrap: break-word;
}
pre, code { overflow-wrap: anywhere; }

/* =============================================================================
   6. COMPONENT PATTERNS — .kh-* namespace, opt-in. Brand colour/type wins
   because styles.css loads after this file. Use these instead of inventing
   one-off widths; every pattern is safe at 375.
   ============================================================================= */

/* Page gutters + max column. */
.kh-container {
  width: 100%;
  max-width: var(--kh-max);
  margin-inline: auto;
  padding-inline: max(1rem, var(--kh-safe-l), var(--kh-safe-r));
}
.kh-container > * { min-width: 0; }

/* Vertical rhythm. */
.kh-stack > * + * { margin-block-start: var(--kh-space-5); }
.kh-stack--tight > * + * { margin-block-start: var(--kh-space-3); }
.kh-stack--loose > * + * { margin-block-start: var(--kh-space-7); }

/* Inline row that wraps instead of overflowing. */
.kh-cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--kh-space-3);
}
.kh-cluster--between { justify-content: space-between; }

/* Auto-fitting grid; minmax(min(...)) is the 375-safe form. */
.kh-grid {
  display: grid;
  gap: var(--kh-space-5);
  grid-template-columns: repeat(auto-fit, minmax(min(var(--kh-grid-min, 16rem), 100%), 1fr));
}

/* Local horizontal rail. The ONLY sanctioned sideways scroll. Contained. */
.kh-scroll-x {
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.kh-scroll-x > * { flex: 0 0 auto; }

/* Frame: radius + clip, so children can never poke out of the corner. */
.kh-plate {
  border-radius: var(--kh-media-radius);
  overflow: clip;
}

/* Media block: image fills the frame, frame keeps the ratio. */
.kh-media {
  position: relative;
  display: block;
  max-width: 100%;
  border-radius: var(--kh-media-radius);
  overflow: clip;
}
.kh-media > img,
.kh-media > video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.kh-media--wide { aspect-ratio: var(--kh-ratio-wide); }
.kh-media--square { aspect-ratio: var(--kh-ratio-square); }
.kh-media--portrait { aspect-ratio: var(--kh-ratio-portrait); }
.kh-media--tall { aspect-ratio: var(--kh-ratio-tall); }

/* Pill button / chip. */
.kh-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--kh-space-2);
  min-height: var(--kh-tap);
  padding: var(--kh-space-2) var(--kh-space-5);
  border-radius: var(--kh-radius-pill);
  text-decoration: none;
  white-space: nowrap;
}

/* Touch target without changing how it looks. */
.kh-tap { min-width: var(--kh-tap); min-height: var(--kh-tap); }

/* Readable line length. */
.kh-measure { max-width: var(--kh-measure); }

/* Edge-to-edge band. Full-viewport width units are banned. */
.kh-bleed {
  width: 100%;
  max-width: 100%;
  margin-inline: 0;
}

/* Visually hidden but screen-reader available. */
.kh-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

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