design/tokens/spacing.css

/* Spacing: the 4px Tailwind ramp is what ships. The golden-ratio ramp below is
   declared in hanzo.ai's tailwind.config.ts (legacy v3 config, kept for
   reference) — use it for editorial layouts, not for component padding. */
:root{
  /* The density knob. 1 is the published spacing; every --space-* rung below
     multiplies by it, and --grid-gap-* reference those rungs rather than
     restating them, so gaps, padding and section rhythm move together.
     @hanzo/design's `vars({density})` emits exactly this name. */
  --density:1;

  --space-0:0;
  --space-1:calc(0.25rem * var(--density, 1));
  --space-2:calc(0.5rem * var(--density, 1));
  --space-3:calc(0.75rem * var(--density, 1));
  --space-4:calc(1rem * var(--density, 1));
  --space-5:calc(1.25rem * var(--density, 1));
  --space-6:calc(1.5rem * var(--density, 1));
  --space-8:calc(2rem * var(--density, 1));
  --space-10:calc(2.5rem * var(--density, 1));
  --space-12:calc(3rem * var(--density, 1));
  --space-14:calc(3.5rem * var(--density, 1));
  --space-16:calc(4rem * var(--density, 1));
  --space-20:calc(5rem * var(--density, 1));
  --space-24:calc(6rem * var(--density, 1));
  --space-32:calc(8rem * var(--density, 1));

  /* golden ramp (φ) — hanzo.ai tailwind.config.ts */
  --golden-1:0.25rem;
  --golden-2:0.405rem;
  --golden-3:0.654rem;
  --golden-4:1.059rem;
  --golden-5:1.713rem;
  --golden-6:2.772rem;
  --golden-7:4.487rem;
  --golden-8:7.26rem;
  --golden-9:11.749rem;
  --golden-split:38.2% 61.8%; /* @kind other */

  /* 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 */
  /* 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));
  /* The chrome's inset: @hanzogui/shell lays its header and menus on this
     value, so a page that reads it starts in the column the brand mark does.
     20px at 390, 41 at 1024, 58 at 1440. */
  --page-gutter:clamp(20px,4vw,72px);
  --gutter-sm:1.5rem;         /* sm:px-6                       */
  --gutter-lg:2rem;           /* lg:px-8                       */
  --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 */
  /* The fixed bars a surface actually DRAWS, which base.css's scroll padding
     clears. 0 until a surface with a fixed header or dock sets them, usually
     from a measurement; --header-height is the bar's designed size. */
  --header:0px;
  --dock:0px;

  /* ——— 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;

  /* ——— controls ——— */
  /* A control's OWN height, which the floor above does not answer: 44px is the
     smallest a finger may aim at, not the size a thing should be. Nothing named
     the second question, so each surface answered it privately and they drifted
     — @hanzo/ui keeps `CONTROL_H = 36` in TypeScript, hanzoai/app pins a 30px
     `--control-h` over that same 36px library, and hanzoai/id spelled
     `min-height:52px` into three separate rules.
     The first three rungs ARE @hanzo/ui's size table (default/sm/lg), moved
     down to the layer that holds values so a host can answer it once instead of
     each library carrying a private copy. They sit under the tap floor on
     purpose: base.css lifts whichever one is spent to 44px under
     `pointer:coarse`, so one declaration serves a compact pointer control and a
     hittable touch one. -xl is what a surface earns when the control IS the
     content — one field, one button, nothing competing — where the default
     reads as one of a stack rather than as the thing the screen is for. */
  --control-height-sm:32px;
  --control-height:36px;
  --control-height-lg:40px;
  --control-height-xl:52px;

  /* ——— 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;
  }
}