/* Generated by tools/make-ui-tokens from type/TYPOGRAPHY.md and ui/INTERFACE.md. Do not edit -- edit those and regenerate. ui f3675fa98a5f -- resolve to a release in CHANGELOG.md. */

:root {
  --hron-size-12: 12px;
  --hron-leading-12: 16px;
  --hron-size-14: 14px;
  --hron-leading-14: 20px;
  --hron-size-16: 16px;
  --hron-leading-16: 24px;
  --hron-size-18: 18px;
  --hron-leading-18: 28px;
  --hron-size-20: 20px;
  --hron-leading-20: 28px;
  --hron-size-24: 24px;
  --hron-leading-24: 32px;
  --hron-size-28: 28px;
  --hron-leading-28: 36px;
  --hron-size-32: 32px;
  --hron-leading-32: 40px;
  --hron-size-40: 40px;
  --hron-leading-40: 48px;
  --hron-size-48: 48px;
  --hron-leading-48: 56px;
  --hron-weight-body: 400;
  --hron-weight-emphasis: 500;
  --hron-weight-heading: 600;
  --hron-weight-strong: 700;
  --hron-font-body: "Adwaita Sans", system-ui, sans-serif;
  --hron-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --hron-space-0: 0;
  --hron-space-4: 4px;
  --hron-space-8: 8px;
  --hron-space-12: 12px;
  --hron-space-16: 16px;
  --hron-space-20: 20px;
  --hron-space-24: 24px;
  --hron-space-32: 32px;
  --hron-space-48: 48px;
  --hron-space-64: 64px;
  --hron-radius-0: 0;
  --hron-radius-2: 2px;
  --hron-radius-4: 4px;
  --hron-radius-full: 9999px;
  --hron-duration-instant: 0ms;
  --hron-duration-fast: 100ms;
  --hron-duration-base: 200ms;
  --hron-duration-slow: 320ms;
  --hron-easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --hron-easing-exit: cubic-bezier(0.4, 0, 1, 1);
  --hron-control-24: 24px;
  --hron-control-32: 32px;
  --hron-control-40: 40px;
  --hron-control-48: 48px;
  --hron-border-width: 1px;
  --hron-touch-target: 44px;
  --hron-focus-width: 2px;
  --hron-focus-offset: 2px;
  --hron-measure: 640px;

  /* Elevation -- LIGHT MODE ONLY. See ui/INTERFACE.md: on our pure-black dark
     page these composite to a delta of exactly zero at every alpha. */
  --hron-elevation-0: none;
  --hron-elevation-1: 0 1px 2px rgba(0, 0, 0, 0.05);
  --hron-elevation-2: 0 2px 8px rgba(0, 0, 0, 0.08);
  --hron-elevation-3: 0 4px 16px rgba(0, 0, 0, 0.12);
}

@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    --hron-elevation-0: none;
    --hron-elevation-1: none;
    --hron-elevation-2: none;
    --hron-elevation-3: none;
  }
}

:root[data-theme="dark"] {
  --hron-elevation-0: none;
  --hron-elevation-1: none;
  --hron-elevation-2: none;
  --hron-elevation-3: none;
}