/* ============================================================
 * KeebPilot — Single Global Layout System
 * SHELL / CONTAINER / READING + ratio tokens + section spacing.
 * This file defines classes ONLY. It does not force any page to
 * use them; pages opt in by adding the classes. Other pages that
 * were restored to their own hardcoded widths do NOT reference
 * these tokens, so loading this file is harmless to them.
 *
 * Phase 2C (Final Site-Wide UI Closure):
 *  - Container Contract: MAIN / WIDE / READING single source of truth.
 *  - Header Family: real measured heights (desktop/tablet/mobile).
 *  - Home header is a documented VARIANT of the same family
 *    (adds a secondary category-nav row => 122px on desktop).
 * ============================================================ */

:root {
  /* Hero shell band (home hero only — decorative, not a page container) */
  --kb-shell-max: 1440px;

  /* Page-container contract (P2C) — single source of truth.
     MAIN  = home / category / finder / bloghub / contact / faq / cart
     WIDE  = compare / product
     READING = article / legal / guide                       */
  --kb-container-main: 1180px;
  --kb-container-wide: 1320px;
  --kb-container-reading: 800px;

  /* Legacy aliases kept for backward-compat with .kb-container class */
  --kb-content-max: 1180px;
  --kb-reading-max: 800px;

  --kb-gutter: 40px;

  --kb-section-space: clamp(64px, 6vw, 88px);
  --kb-section-space-large: clamp(80px, 8vw, 112px);

  /* Header Family — real measured (see KeebPilot_Global_UI_Contract_v1.0.md)
     Inner pages: 78px desktop / 68px tablet+mobile.
     Home variant: 122px desktop (logo row 76 + category-nav row 44 + borders). */
  --kb-header-height: 78px;
  --kb-header-height-desktop: 78px;
  --kb-header-height-tablet: 68px;
  --kb-header-height-mobile: 68px;
  --kb-announcement-height: 36px;

  /* Canonical public visual tokens */
  --kb-color-primary: #E1251B;
  --kb-color-primary-hover: #C81623;
  --kb-color-ink: #111827;
  --kb-color-text: #374151;
  --kb-color-muted: #6B7280;
  --kb-color-bg: #FFFFFF;
  --kb-color-page: #F5F7FA;
  --kb-color-surface: #F7F8FA;
  --kb-color-border: #E5E7EB;
  --kb-color-primary-soft: #FFF1F0;

  --kb-radius-sm: 4px;
  --kb-radius-md: 6px;
  --kb-radius-lg: 8px;
  --kb-radius-pill: 999px;

  --kb-shadow-card: 0 1px 3px rgba(0,0,0,.06);

  --kb-fs-body: 17px;
  --kb-fs-meta: 13px;
  --kb-fs-control: 15px;
  --kb-fs-h1: clamp(30px, 3vw, 36px);
  --kb-fs-h2: clamp(24px, 2.2vw, 28px);
  --kb-fs-h3: clamp(20px, 1.8vw, 22px);

  --kb-space-1: 8px;
  --kb-space-2: 12px;
  --kb-space-3: 16px;
  --kb-space-4: 24px;
  --kb-space-5: 32px;
  --kb-space-6: 48px;
  --kb-space-7: 64px;

  /* Image ratio tokens */
  --kb-ratio-square: 1 / 1;
  --kb-ratio-hero: 4 / 3;
  --kb-ratio-split: 16 / 10;
  --kb-ratio-scene: 3 / 2;
  --kb-ratio-video: 16 / 9;
}

@media (max-width: 1024px) {
  :root { --kb-gutter: 28px; }
}

@media (max-width: 767px) {
  :root { --kb-gutter: 20px; }
}

/* ---- Shared container classes ---- */
.kb-shell,
.kb-container,
.kb-reading-container {
  width: 100%;
  margin-inline: auto;
  box-sizing: border-box;
  padding-inline: var(--kb-gutter);
}

.kb-shell {
  max-width: var(--kb-shell-max);
}

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

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

/* ---- Section rhythm ---- */
.kb-section {
  padding-block: var(--kb-section-space);
}

.kb-section--large {
  padding-block: var(--kb-section-space-large);
}

/* ---- Grid/flex children must not overflow ---- */
.kb-shell > *,
.kb-container > *,
.kb-reading-container > * {
  min-width: 0;
  max-width: 100%;
}