/* GENERATED by brand/src/shape.ts from brand/shape.yaml. Do not edit. */
/* Shape for every AKRIBIS site (ADR-0021, proposed): spacing, radii, layout, motion, focus, elevation. Link after base.css. */
:root {
  /* spacing: multiples of 0.25 rem; nothing in between */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  /* radii: tight corners read as precise */
  --radius-none: 0px;
  --radius-tag: 2px;
  --radius-control: 4px;
  --radius-dialog: 8px;
  --radius-pill: 999px;
  --radius-round: 50%;
  /* layout: frames, gutter, columns, breakpoints (for scripts; media queries use the same values), targets */
  --container: 80rem;
  --content: 64rem;
  --reading: 46rem;
  --gutter: var(--space-4);
  --columns: 12;
  --column-gap: var(--space-6);
  --bp-sm: 36rem;
  --bp-md: 48rem;
  --bp-lg: 64rem;
  --bp-xl: 80rem;
  --target-min: 1.5rem;
  --control-height: 2.75rem;
  --bar-height: 3.25rem;
  /* motion: a duration explains a change of state; all three are 0 under reduced motion */
  --duration-state: 120ms;
  --duration-reveal: 200ms;
  --duration-move: 320ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-exit: cubic-bezier(0.4, 0, 1, 1);
  /* focus: the ring, visible on every interactive element */
  --focus-width: 2px;
  --focus-offset: 2px;
  --focus-ring: var(--focus-width) solid var(--color-accent);
  --focus-ring-on-accent: var(--focus-width) solid var(--color-on-accent);
  /* elevation: hairlines and bands draw the structure; the one shadow is for overlays; layers are z-index */
  --hairline: 1px;
  --shadow-overlay: 0px 8px 24px 0px #00000029, 0px 1px 2px 0px #00000014;
  --layer-raised: 1;
  --layer-sticky: 10;
  --layer-overlay: 100;
  --layer-toast: 1000;
}
@media (min-width: 48rem) {
  :root { --gutter: var(--space-8); }
}
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-state: 0ms;
    --duration-reveal: 0ms;
    --duration-move: 0ms;
  }
}
:root[data-theme="dark"] {
  --shadow-overlay: 0px 8px 24px 0px #00000099, 0px 1px 2px 0px #00000066;
}