/*
 * Design tokens: the only place for fonts, sizes, spacing, radii and shadows.
 * Colour values live in themes/*.css (one file per theme, same semantic names).
 */
:root {
  /* Fonts (spec 3.5). DM Sans has no tabular figures: numeric columns use the fallback. */
  --hl-font-fallback: Arial, "Liberation Sans", Roboto, sans-serif;
  --hl-font-ui: "DM Sans", var(--hl-font-fallback);
  --hl-font-display: Raleway, var(--hl-font-fallback);
  --hl-font-numeric: var(--hl-font-fallback);
  --hl-weight-regular: 400;
  --hl-weight-medium: 500;
  --hl-weight-bold: 700;
  --hl-weight-display: 800;

  /* Type scale, relative to the layout base size. */
  --hl-font-size-base: 1rem;
  --hl-text-xs: 0.75em;
  --hl-text-sm: 0.875em;
  --hl-text-md: 1em;
  --hl-text-lg: 1.25em;
  --hl-text-xl: 1.5em;
  --hl-text-2xl: 2em;
  --hl-text-display: 2.5em;
  --hl-line-height: 1.5;
  --hl-line-height-tight: 1.2;
  --hl-letter-spacing-caps: 0.04em;

  /* Spacing scale. */
  --hl-space-1: 0.25rem;
  --hl-space-2: 0.5rem;
  --hl-space-3: 0.75rem;
  --hl-space-4: 1rem;
  --hl-space-5: 1.5rem;
  --hl-space-6: 2rem;
  --hl-space-7: 3rem;
  --hl-gap: var(--hl-space-4);
  --hl-cell-padding: var(--hl-space-3);

  /* Shapes: sober, industrial (spec 3.5). */
  --hl-radius-button: 4px;
  --hl-radius-card: 6px;
  --hl-radius-chip: 4px;
  --hl-border-width: 1px;
  --hl-focus-width: 3px;
  --hl-shadow-raised: 0 1px 2px var(--hl-shadow-color);

  /* Sizes. */
  --hl-touch-target: 44px;
  --hl-icon-size: 1.25em;
  --hl-content-width: 72rem;
  --hl-content-width-narrow: 32rem;
  --hl-header-height: 3.5rem;

  /* Motion: fades only, 150 ms at most. */
  --hl-duration: 150ms;
  --hl-easing: ease-out;
}

/* Density per layout (spec 3.5). */
[data-hl-layout="staff"] {
  --hl-font-size-base: 1rem;
  --hl-gap: var(--hl-space-5);
}

[data-hl-layout="kitchen"],
[data-hl-layout="driver"] {
  --hl-font-size-base: 1.25rem;
  --hl-touch-target: 56px;
  --hl-gap: var(--hl-space-5);
  --hl-cell-padding: var(--hl-space-4);
}

[data-hl-layout="admin"] {
  --hl-font-size-base: 0.9375rem;
  --hl-gap: var(--hl-space-3);
  --hl-cell-padding: var(--hl-space-2);
  --hl-touch-target: 36px;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --hl-duration: 0ms;
  }
}