/* Umferðarlög Brand Code 1.0.0: https://brand.umferdarlog.com/tokens.css. Pin light with data-theme="light" on <html>. */

:root {
  --ul-ink: #182024;
  --ul-road-line: #f1f4f4;
  --ul-paper: #ffffff;
  --ul-glacier: #1d5f94;
  --ul-glacier-bright: #246ba3;
  --ul-glacier-sky: #8ccbea;
  --ul-asphalt: #3a464c;
  --ul-marker-done: #1f2a2f;
  --ul-basalt: #eef1f0;
  --ul-stone: #dadedd;
  --ul-slate: #56636a;
  --ul-stone-ink: #4a565c;
  --ul-night: #0f1416;
  --ul-night-cluster: #10161a;
  --ul-night-stone: #2a3439;
  --ul-night-ink: #e9eeef;
  --ul-night-slate: #9aa8ae;
  --ul-night-stone-ink: #c9d2d6;
  --ul-night-deep: #0a0e10;
  --ul-moss: #2e7550;
  --ul-moss-deep: #2e6b45;
  --ul-moss-light: #8fd0aa;
  --ul-moss-tint: #e2efe6;
  --ul-lava: #b83a2e;
  --ul-lava-deep: #a8342a;
  --ul-lava-light: #f2a097;
  --ul-lava-tint: #f7e2df;
  --ul-ochre: #d99a3d;
  --ul-ochre-deep: #8f5310;
  --ul-ochre-light: #e8ad5a;
  --ul-sign-yellow: #f8c800;
  --ul-sign-red: #d20000;
  --ul-bg: var(--ul-basalt);
  --ul-surface: var(--ul-paper);
  --ul-surface-alt: var(--ul-stone);
  --ul-border: var(--ul-stone);
  --ul-heading: var(--ul-ink);
  --ul-text: var(--ul-ink);
  --ul-text-soft: var(--ul-slate);
  --ul-text-muted: var(--ul-stone-ink);
  --ul-brand: var(--ul-glacier);
  --ul-brand-strong: var(--ul-glacier);
  --ul-action: var(--ul-glacier);
  --ul-on-brand: var(--ul-paper);
  --ul-danger: var(--ul-lava);
  --ul-danger-strong: var(--ul-lava-deep);
  --ul-ok: var(--ul-moss);
  --ul-ok-strong: var(--ul-moss-deep);
  --ul-warn: var(--ul-ochre);
  --ul-warn-strong: var(--ul-ochre-deep);
  --ul-brand-tint: rgb(29 95 148 / 8%);
  --ul-font-plate: "Medeo Sans", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --ul-font-cluster: "Barlow Semi Condensed", -apple-system, system-ui, sans-serif;
  --ul-font-text: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", "Roboto", sans-serif;
  --ul-size-display: 76px;
  --ul-size-h1: clamp(2rem, 1.35rem + 2.6vw, 3.25rem);
  --ul-size-h2: clamp(1.75rem, 3.5vw, 2.5rem);
  --ul-size-h3: clamp(1.1875rem, 2vw, 1.5rem);
  --ul-size-gauge: 56px;
  --ul-size-lead: 19px;
  --ul-size-body: 17px;
  --ul-size-button: 17px;
  --ul-size-label: 15px;
  --ul-size-caption: 13px;
  --ul-type-display: 700 var(--ul-size-display)/0.98 var(--ul-font-plate);
  --ul-type-h1: 700 var(--ul-size-h1)/1.02 var(--ul-font-plate);
  --ul-type-h2: 700 var(--ul-size-h2)/1.08 var(--ul-font-plate);
  --ul-type-h3: 700 var(--ul-size-h3)/1.15 var(--ul-font-plate);
  --ul-type-gauge: 700 var(--ul-size-gauge)/1 var(--ul-font-cluster);
  --ul-type-lead: 400 var(--ul-size-lead)/1.5 var(--ul-font-text);
  --ul-type-body: 400 var(--ul-size-body)/1.5 var(--ul-font-text);
  --ul-type-button: 600 var(--ul-size-button)/1 var(--ul-font-text);
  --ul-type-label: 600 var(--ul-size-label)/1.3 var(--ul-font-text);
  --ul-type-caption: 400 var(--ul-size-caption)/1.4 var(--ul-font-text);
  --ul-space-1: 4px;
  --ul-space-2: 8px;
  --ul-space-3: 12px;
  --ul-space-4: 16px;
  --ul-space-5: 24px;
  --ul-space-6: 32px;
  --ul-space-7: 48px;
  --ul-space-8: 64px;
  --ul-radius-route: 6px;
  --ul-radius-plate: 9px;
  --ul-radius-sm: 12px;
  --ul-radius-md: 16px;
  --ul-radius-card: 22px;
  --ul-radius-pill: 24px;
  --ul-radius-full: 999px;
  --ul-shadow-raise: 0 8px 24px rgb(24 32 36 / 8%);
  --ul-shadow-card-hover: 0 12px 32px rgb(24 32 36 / 14%);
  --ul-shadow-sign-drop: 0 2px 3px rgb(24 32 36 / 18%);
  --ul-duration: 160ms;
  --ul-press-duration: 120ms;
  --ul-ease: cubic-bezier(0.23, 1, 0.32, 1);
  --ul-content: 1200px;
  --ul-wide: 1264px;
  --ul-gutter: 16px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ul-bg: var(--ul-night);
    --ul-surface: var(--ul-ink);
    --ul-surface-alt: var(--ul-night-stone);
    --ul-border: var(--ul-night-stone);
    --ul-heading: var(--ul-night-ink);
    --ul-text: var(--ul-night-ink);
    --ul-text-soft: var(--ul-night-slate);
    --ul-text-muted: var(--ul-night-slate);
    --ul-brand: var(--ul-glacier-bright);
    --ul-brand-strong: var(--ul-glacier-sky);
    --ul-action: var(--ul-glacier-bright);
    --ul-on-brand: var(--ul-paper);
    --ul-danger: var(--ul-lava);
    --ul-danger-strong: var(--ul-lava-light);
    --ul-ok: var(--ul-moss);
    --ul-ok-strong: var(--ul-moss-light);
    --ul-warn: var(--ul-ochre);
    --ul-warn-strong: var(--ul-ochre-light);
    --ul-brand-tint: rgb(140 203 234 / 16%);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --ul-bg: var(--ul-night);
  --ul-surface: var(--ul-ink);
  --ul-surface-alt: var(--ul-night-stone);
  --ul-border: var(--ul-night-stone);
  --ul-heading: var(--ul-night-ink);
  --ul-text: var(--ul-night-ink);
  --ul-text-soft: var(--ul-night-slate);
  --ul-text-muted: var(--ul-night-slate);
  --ul-brand: var(--ul-glacier-bright);
  --ul-brand-strong: var(--ul-glacier-sky);
  --ul-action: var(--ul-glacier-bright);
  --ul-on-brand: var(--ul-paper);
  --ul-danger: var(--ul-lava);
  --ul-danger-strong: var(--ul-lava-light);
  --ul-ok: var(--ul-moss);
  --ul-ok-strong: var(--ul-moss-light);
  --ul-warn: var(--ul-ochre);
  --ul-warn-strong: var(--ul-ochre-light);
  --ul-brand-tint: rgb(140 203 234 / 16%);
  color-scheme: dark;
}

@media (max-width: 767px) {
  :root {
    --ul-size-display: 34px;
    --ul-size-gauge: 44px;
    --ul-size-lead: 17px;
  }
}