/*
 * Matölye's theme for the UI kit (ui-kit/ui-kit.css): the --uk-* properties point at the app's tokens. They are set
 * on body, not :root, so the dark theme (html[data-theme="dark"]) and body.high-contrast values are both picked up.
 * Contrast: the icon and label in --ink on --surface and white on --brand (4.6:1 at night) pass 4.5:1 in light, dark
 * and high contrast. The tip is the page inverted (--surface text on an --ink fill): navy in light, pale at night, so it
 * stands off the page in both, at 15:1 or better.
 */
body {
  --uk-ink: var(--ink);
  --uk-surface: var(--surface);
  --uk-surface-pressed: var(--surface-3);
  --uk-line: var(--line-strong);
  --uk-accent: var(--brand);
  --uk-on-accent: var(--on-brand);
  --uk-focus: var(--focus);
  --uk-tip-bg: var(--ink);
  --uk-tip-ink: var(--surface);
  --uk-knob: var(--surface);
  --uk-knob-ring: var(--brand);
  --uk-radius: var(--radius-sm);
  --uk-dur: var(--dur-fast);
  --uk-ease: var(--ease-out);
}

/* The app's own motion setting, on top of the system one the kit already follows. */
body.reduced-motion .uk-btn:active:not(:disabled),
body.reduced-motion .uk-tip { transform: none; }
body.reduced-motion [data-uk-dragging] .uk-knob,
body.reduced-motion .uk-knob[data-uk-dragging] { scale: 1; }
body.reduced-motion .uk-knob,
body.reduced-motion [data-uk-snap] .uk-follows,
body.reduced-motion .uk-follows[data-uk-snap] { transition: none; }
body.reduced-motion .uk-hint[data-uk-gesture] .uk-hint__hand .uk-icon,
body.reduced-motion .uk-hint[data-uk-gesture] .uk-hint__hand::before,
body.reduced-motion .uk-hint[data-uk-gesture] .uk-hint__hand::after { animation: none; }