/* ============================================================
   RESPONSIVE — Pavel Presnov Design System
   Additive tokens for phone + tablet layouts. Nothing here overrides
   a desktop value: the desktop scale in typography.css / spacing.css
   is untouched. Mobile screens opt in by using these instead.

   Breakpoint numbers live in breakpoints.css (the canonical source);
   the fluid ramps below are tuned to land on the desktop value at
   --bp-md (768px) so a fluid page and a fixed desktop page agree.
   ============================================================ */

:root {
  /* Fluid display ramp — phone → tablet. Upper bound = the desktop size. */
  --fluid-hero: clamp(34px, 9.2vw, 68px);        /* @kind font */  /* hero h1 */
  --fluid-h2: clamp(28px, 7.4vw, 42px);          /* @kind font */  /* section heading */
  --fluid-h3: clamp(20px, 5.2vw, 24px);          /* @kind font */  /* card / row heading */
  --fluid-quote: clamp(21px, 5.6vw, 34px);       /* @kind font */  /* pull quote */
  --fluid-article: clamp(30px, 8vw, 46px);       /* @kind font */  /* essay title */

  /* Body copy on small screens — one step down from desktop, never below 15px.
     16px on form inputs is deliberate: iOS Safari zooms the page below it. */
  --text-body-mobile: 16px;                      /* @kind font */
  --text-body-sm-mobile: 14.5px;                 /* @kind font */
  --text-input-mobile: 16px;                     /* @kind font */

  /* Touch targets — WCAG 2.5.8 asks 24px, Apple/Google ask 44/48.
     The practice minimum is 44px; 48px for anything used one-handed. */
  --touch-min: 44px;
  --touch-comfortable: 48px;
  --touch-row: 56px;                             /* full-width list / menu row */

  /* Section rhythm — the desktop 112px is too tall on a phone. */
  --section-y-mobile: 64px;
  --section-y-tablet: 88px;
  --gutter-mobile: 20px;
  --gutter-tablet: 40px;

  /* Fixed chrome heights, for scroll offsets and sticky insets. */
  --nav-h-mobile: 60px;
  --nav-h-tablet: 72px;
  --tabbar-h: 64px;

  /* Notch and home-indicator insets. Fall back to 0 off-device. */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}