/* Generated from design/tokens.json and design/vendor/hintapiste/tokens.json by `make tokens`. Do not edit. */

:root {
  --c-bg: #FFFFFF;
  --c-surface: #FFFFFF;
  --c-subtle: #F7F7FA;
  --c-band: #F6F6F9;
  --c-selected: #FFE4E6;
  --c-header: #181829;
  --c-on-header: #FFFFFF;
  --c-on-header-2: #C9C9D6;
  --c-fg: #181829;
  --c-fg-2: #4F4F64;
  --c-muted: #6B6B7C;
  --c-border: #D4D4DF;
  --c-hairline: #E4E4EB;
  --c-control: #7B8490;
  --c-link: #BE123C;
  --c-action: #E11D48;
  --c-action-hover: #BE123C;
  --c-action-active: #9F1239;
  --c-on-action: #FFFFFF;
  --c-selected-border: #E11D48;
  --c-focus: #BE123C;
  --c-focus-contrast: #FFFFFF;
  --c-chart: #181829;
  --c-chart-median: #6B6B7C;
  --c-positive: #1F6B45;
  --c-warning: #765600;
  --c-missing: #6B6B7C;
  --c-disabled: #F7F7FA;
  --c-print-bg: #FFFFFF;
  --c-print-fg: #181829;
  --c-print-fg-2: #4F4F64;
  --c-print-border: #D4D4DF;
  --f-sans: Lato, sans-serif;
  --f-display: Barlow, sans-serif;
  --fw-regular: 400;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-black: 900;
  --tr-display: -0.015em;
  --t-xs: 13px;
  --lh-xs: 1.4;
  --t-sm: 14px;
  --lh-sm: 1.4;
  --t-button: 14px;
  --lh-button: 1.4;
  --t-md: 16px;
  --lh-md: 1.4;
  --t-body: 14px;
  --lh-body: 1.5;
  --t-prose: 16px;
  --lh-prose: 1.5;
  --t-lg: 16px;
  --lh-lg: 1.25;
  --t-lead: 18px;
  --lh-lead: 1.5;
  --t-xl: 20px;
  --lh-xl: 1.25;
  --t-h1: 32px;
  --lh-h1: 1.1;
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 40px;
  --s-8: 48px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --r-none: 0px;
  --r-control: 8px;
  --r-surface: 10px;
  --ctl-h-md: 36px;
  --ctl-h-touch: 44px;
  --ctl-h-action: 44px;
  --ctl-px-sm: 10px;
  --ctl-px-md: 12px;
  --ctl-px-action: 16px;
  --ctl-row-y: 16px;
  --ctl-row-x: 20px;
  --focus-width: 3px;
  --focus-offset: 2px;
  --sh-surface: none;
  --sh-floating: 0px 8px 24px 0px rgba(24,24,41,0.12);
  --d-fast: 120ms;
  --d-base: 160ms;
  --d-ease: cubic-bezier(0, 0, 0.2, 1);
  --w-max: 1280px;
  --w-reading: 760px;
  --w-prose: 68ch;
  --section-y: 32px;
  --gutter: 16px;
}
@media (min-width: 1024px) {
  :root {
    --section-y: 48px;
    --gutter: 32px;
  }
}