/* responsive-tokens.css — MAIN-SESSION-OWNED
 * Plan: abstract-wondering-grove (2026-04-28)
 * Purpose: Centralized breakpoint + spacing CSS custom properties.
 * Risk: 0 (only :root variable definitions, no rule overrides).
 * Existing 60+ CSS files NOT touched.
 */

:root {
  /* Breakpoints — mobile device widths */
  --bp-xs: 320px;   /* iPhone SE 1st gen, smallest mobile */
  --bp-sm: 375px;   /* iPhone 13 mini, iPhone 8 */
  --bp-md: 414px;   /* iPhone 13 Pro Max, large mobile */
  --bp-lg: 480px;   /* tablet portrait threshold */
  --bp-xl: 767px;   /* tablet landscape boundary */
  --bp-xxl: 992px;  /* mobile→desktop redirect threshold */

  /* Spacing scale (4px grid system) */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;

  /* Typography fluid scale (clamp-based) */
  --fs-xs: clamp(10px, 2.6vw, 11px);
  --fs-sm: clamp(11px, 3.2vw, 13px);
  --fs-base: clamp(13px, 3.8vw, 14px);
  --fs-md: clamp(14px, 4.2vw, 16px);
  --fs-lg: clamp(16px, 4.8vw, 18px);
  --fs-xl: clamp(20px, 5.5vw, 28px);

  /* Mobile chrome heights (existing pattern) */
  --mobile-header-height: 49px;
  --mobile-footer-height: 49px;
  --mobile-announcement-height: 32px;

  /* Safe area shortcuts */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
}