/* ═══════════════════════════════════════════════════════════════
   RDI Design System — Responsive tokens
   Single source of truth for breakpoints, layout metrics, and
   container-density switches. Every shell + component reads from
   these variables; changing a breakpoint here reflows the system.
   =============================================================== */

:root {
  /* Breakpoints (min-width-based, mobile-first) */
  --bp-sm: 640px;    /* phone landscape          */
  --bp-md: 900px;    /* tablet / small laptop    */
  --bp-lg: 1200px;   /* desktop                  */
  --bp-xl: 1600px;   /* wide desktop             */

  /* Container + page metrics */
  --container-max: 1200px;
  --container-pad: 40px;
  --topbar-h:    64px;

  /* Sidebar metrics — 3-state: full / rail / hidden */
  --sidebar-w:           240px;
  --sidebar-w-rail:       64px;
  --sidebar-w-active: var(--sidebar-w);

  /* Hero + type fluid scales */
  --hero-title-size: clamp(38px, 5.2vw, 64px);
  --section-title-size: clamp(28px, 3.6vw, 42px);

  /* Grid templates used across the hub */
  --hub-top-grid: 260px 1fr 340px;
  --home-hero-grid: 1.3fr 1fr;
  --home-stats-cols: 5;
  --home-cards-cols: 3;
  --home-qs-cols: 4;
  --home-footer-cols: 3;
}

/* ── Tablet: icon rail, condensed chrome ─────────────────────── */
@media (max-width: 1199.98px) {
  :root {
    --sidebar-w-active: var(--sidebar-w-rail);
    --container-pad: 24px;
    --hub-top-grid: auto 1fr 280px;
    --home-stats-cols: 3;
    --home-cards-cols: 2;
    --home-qs-cols: 2;
    --home-footer-cols: 2;
  }
}

/* ── Tablet portrait / small laptop ──────────────────────────── */
@media (max-width: 899.98px) {
  :root {
    --sidebar-w-active: 0px;        /* sidebar becomes a drawer */
    --container-pad: 20px;
    --hub-top-grid: auto 1fr auto;
    --home-hero-grid: 1fr;
    --home-stats-cols: 2;
    --home-cards-cols: 1;
    --home-qs-cols: 2;
    --home-footer-cols: 1;
  }
}

/* ── Phone ────────────────────────────────────────────────────── */
@media (max-width: 639.98px) {
  :root {
    --container-pad: 16px;
    --topbar-h: 56px;
    --home-stats-cols: 2;
    --home-qs-cols: 1;
  }
}