/* metrics.css — radius, gaps, strokes, control sizes. Metrics stay px, as on iOS.
   Source: web/helix-tokens.css (HELIX web foundations), which mirrors HLXTheme.swift,
   HLXTypography.swift and HLXMetrics.swift. 1 iOS pt = 1 CSS px. */

:root {
  /* Radius */
  --hlx-radius-control: 10px;
  --hlx-radius-card: 16px;
  --hlx-radius-screen: 24px;
  --hlx-radius-key: 12px;
  --hlx-radius-key-compact: 10px;
  --hlx-radius-thumb: 7px;
  --hlx-radius-pill-segment: 7px;   /* HLXSegmentedControl selection pill */
  --hlx-radius-alert-button: 8px;   /* HLXAlertView buttons + field */

  /* Gaps */
  --hlx-gap-hairline: 8px;
  --hlx-gap-tight: 12px;
  --hlx-gap-base: 20px;
  --hlx-gap-loose: 32px;
  --hlx-gap-section: 44px;

  /* Strokes */
  --hlx-border-width: 1px;          /* iOS 1.5pt, rounded down: whole pixels on web */
  --hlx-border-width-ios: 1.5px;    /* use inside true-size iOS mocks */
  --hlx-border-width-strong: 2px;
  --hlx-focus-ring-width: 3px;
  --hlx-hairline-width: 1px;

  /* Controls — controlMin is the gloved-hand floor */
  --hlx-control-min: 56px;
  --hlx-control-large: 64px;
  --hlx-control-segment: 48px;

  /* Panes */
  --hlx-pane-padding-h: 64px;
  --hlx-pane-padding-v: 44px;
  --hlx-pane-padding-compact: 24px;
  --hlx-form-max-width: 420px;
  --hlx-hero-width-ratio: 0.506; /* @kind other */
  --hlx-hero-stacked-height: 436px;
  --hlx-hero-compact-height: 232px;

  /* Keypad + passcode */
  --hlx-key-size: 88px;
  --hlx-key-size-compact: 64px;
  --hlx-key-gutter: 18px;
  --hlx-key-gutter-compact: 12px;
  --hlx-dot-size: 22px;
  --hlx-dot-size-compact: 18px;
  --hlx-dot-gap: 18px;
  --hlx-dot-gap-compact: 14px;
  --hlx-dot-stroke: 2px;

  /* Blueprint grid */
  --hlx-grid-minor-step: 40px;
  --hlx-grid-major-step: 200px;
}