@hanzo/design 0.4.0 → 0.4.2

package/tokens/spacing.css

@@ -30,16 +30,55 @@
   --golden-9:11.749rem;
   --golden-split:38.2% 61.8%; /* @kind other */
 
-  /* layout rules (DESIGN.md §1.3) */
+  /* layout rules (DESIGN.md §1.3) —
+     MOBILE-FIRST: the values authored here are the PHONE values, and the
+     min-width block at the bottom of this file scales them up. A surface that
+     uses the raw token therefore gets a layout that already breathes correctly
+     at 390px, with no media query of its own. (This is also the value the
+     generator captures for tokens.gen.ts — first occurrence wins, and the
+     authored default is the small one.) */
   --container-max:80rem;      /* max-w-7xl — grids            */
   --container-prose:48rem;    /* max-w-3xl — centered text    */
   --container-wide:72rem;     /* max-w-6xl — landing sections */
-  --gutter:1rem;              /* px-4                          */
+  /* The page gutter also clears a notch. env() is 0px on every device without
+     one, so this is exactly `1rem` in the ordinary case and the safe inset when
+     there is something to avoid — no per-app work, no landscape clipping.
+     Requires `<meta name="viewport" content="…,viewport-fit=cover">` on the
+     host page; without it the UA reports 0 and the max() is inert, not wrong. */
+  --gutter:max(1rem,var(--safe-left),var(--safe-right));
   --gutter-sm:1.5rem;         /* sm:px-6                       */
   --gutter-lg:2rem;           /* lg:px-8                       */
-  --section-y:4rem;           /* py-16 — content sections      */
-  --section-y-lg:6rem;        /* py-24 — landing sections      */
-  --hero-y:5rem;              /* py-20 …                       */
-  --hero-y-lg:8rem;           /* … lg:py-32                    */
-  --header-height:4rem;
+  --section-y:2.5rem;         /* py-10 on a phone → py-16 at md */
+  --section-y-lg:3.5rem;      /* py-14 on a phone → py-24 at md */
+  --hero-y:3rem;              /* py-12 on a phone → py-20 at md */
+  --hero-y-lg:4.5rem;         /* py-18 on a phone → py-32 at md */
+  --header-height:3.5rem;     /* 56px is the phone bar; 64px from md */
+
+  /* ——— touch ——— */
+  /* 44px is the floor a pointer-coarse target may render at (Apple HIG 44pt /
+     WCAG 2.5.5 AAA / 2.5.8 AA's 24px, taken at the higher bar). base.css spends
+     it automatically under `@media (pointer:coarse)`, so a button does not have
+     to opt in. It was previously a bare `min-height:44px` literal in
+     hanzoai/id's stylesheet — one app knowing something the system did not. */
+  --tap-target:44px;
+
+  /* ——— safe areas ——— */
+  /* The notch/home-indicator insets, named once. Anything pinned to a viewport
+     edge — a fixed header, a bottom bar, a sheet — adds the matching one. */
+  --safe-top:env(safe-area-inset-top,0px);
+  --safe-right:env(safe-area-inset-right,0px);
+  --safe-bottom:env(safe-area-inset-bottom,0px);
+  --safe-left:env(safe-area-inset-left,0px);
+}
+
+/* Scale up from the phone. `md` (48rem) is the same breakpoint grid.css
+   declares and Tailwind compiles against — one value, not two that agree. */
+@media (min-width:48rem){
+  :root{
+    --section-y:4rem;         /* py-16 — content sections      */
+    --section-y-lg:6rem;      /* py-24 — landing sections      */
+    --hero-y:5rem;            /* py-20 …                       */
+    --hero-y-lg:8rem;         /* … lg:py-32                    */
+    --header-height:4rem;
+  }
 }

package/tokens/typography.css

@@ -36,6 +36,19 @@
   --font-size-8xl:var(--text-8xl);
   --font-size-9xl:var(--text-9xl);
 
+  /* The size a FORM CONTROL renders at — and the ONE step in this scale that is
+     not a constant. iOS Safari zooms the viewport whenever a focused input
+     computes below 16px, and this scale's base is 14px, so every surface that
+     sized a field from --text-sm or --text-base bought the zoom.
+
+     It has to be a TOKEN rather than a rule because a control's size is almost
+     always set inline (every component in components/forms does), and an inline
+     style outranks any stylesheet — including a media query. A var() resolves
+     per-device inside that inline style, so this is the only construction that
+     actually reaches the control. Fields ask for --text-control; nothing else
+     should. */
+  --text-control:var(--text-sm);
+
   --weight-normal:400;
   --weight-medium:500;
   --weight-semibold:600;
@@ -63,3 +76,11 @@
   --type-code:400 var(--text-sm)/var(--leading-relaxed) var(--font-mono);
   --type-eyebrow:600 0.625rem/1 var(--font-sans);
 }
+
+/* On touch, a control goes to 16px. Below that iOS Safari zooms the viewport on
+   focus and never zooms back out, which is the single most common way a mobile
+   form feels broken. pointer:coarse is the real signal — a desktop mouse keeps
+   the compact 13px field. */
+@media (pointer:coarse){
+  :root{--text-control:1rem}
+}