/*
 * Design primitives
 * -----------------
 * Theme-independent values only. Components and routes must consume semantic
 * roles from semantics.css rather than defining their own palettes.
 */

@layer tokens, base, components, views;

html[data-design-system="halde"]{
  --font-editorial:"Geist","Helvetica Neue",Arial,sans-serif;
  --font-technical:"Geist Mono","IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;

  --tracking-display:-.055em;
  --tracking-meta:.1em;
  --leading-body:1.625;

  --space-1:8px;
  --space-2:16px;
  --space-3:24px;
  --space-4:32px;
  --space-5:64px;
  --space-6:96px;
  --space-7:128px;
  --page-gutter:clamp(20px,3.25vw,52px);
  --section-space:clamp(72px,9vw,128px);
  --content-max:1600px;
  --mast-offset:65px;

  --control-height:40px;
  --control-height-small:32px;
  --control-pad:14px;

  --ease-reveal:cubic-bezier(.22,1,.36,1);
  --duration-reveal:700ms;
  --duration-mask:900ms;
  --duration-ui:240ms;
}