:root{

  --ds-ink:   #171717;
  --ds-paper: #F0F0F0;
  --ds-red:   #E63E3E;

  --ds-ink-a08:   rgba(23, 23, 23, .08);
  --ds-ink-a16:   rgba(23, 23, 23, .16);
  --ds-ink-a60:   rgba(23, 23, 23, .60);
  --ds-paper-a12: rgba(240, 240, 240, .12);
  --ds-paper-a24: rgba(240, 240, 240, .24);
  --ds-paper-a70: rgba(240, 240, 240, .70);

  --ds-surface-color:   var(--ds-paper);
  --ds-text-color:      var(--ds-ink);
  --ds-title-color:     var(--ds-ink);
  --ds-muted-color:     var(--ds-ink-a60);
  --ds-mark-color:      var(--ds-red);
  --ds-accent:          var(--ds-red);
  --ds-accent-contrast: var(--ds-paper);
  --ds-border-color:    var(--ds-ink-a16);
  --ds-focus-color:     var(--ds-red);

  --ds-font-display: "Zalando Sans", "Zalando Sans Expanded",
                     system-ui, -apple-system, "Segoe UI", Roboto,
                     "Helvetica Neue", Arial, sans-serif;
  --ds-font-body:    var(--ds-font-display);
  --ds-font-alt:     "Funnel Display", system-ui, -apple-system,
                     "Segoe UI", Roboto, Arial, sans-serif;

  --ds-fw-regular: 400;
  --ds-fw-medium:  500;
  --ds-fw-bold:    700;
  --ds-fw-xbold:   800;
  --ds-fw-black:   900;

  --ds-fs-display: clamp(2.125rem,  0.917rem + 5.37vw, 5.75rem);
  --ds-fs-xl:      clamp(1.75rem,   1.000rem + 3.33vw, 4rem);
  --ds-fs-lg:      clamp(1.5rem,    1.000rem + 2.22vw, 3rem);
  --ds-fs-md:      clamp(1.25rem,   1.000rem + 1.11vw, 2rem);
  --ds-fs-sm:      clamp(1.125rem,  1.000rem + 0.56vw, 1.5rem);
  --ds-fs-xs:      clamp(1rem,      0.917rem + 0.37vw, 1.25rem);
  --ds-fs-2xs:     clamp(0.875rem,  0.833rem + 0.19vw, 1rem);

  --ds-fs-body:    clamp(1rem,      0.958rem + 0.19vw, 1.125rem);
  --ds-fs-btn:     clamp(0.9375rem, 0.896rem + 0.19vw, 1.0625rem);
  --ds-fs-caption: clamp(0.8125rem, 0.792rem + 0.09vw, 0.875rem);

  --guide-fs-title: clamp(2.25rem, 5.3vw, 4.75rem);
  --guide-fs-body:  clamp(1rem, 0.95rem + 0.2vw, 1.125rem);
  --guide-fs-btn:   clamp(1rem, 1.4vw, 1.25rem);
  --guide-fs-small: clamp(0.875rem, 0.854rem + 0.09vw, 0.9375rem);

  --ds-lh-tight:  1.02;
  --ds-lh-snug:   1.15;
  --ds-lh-normal: 1.55;

  --ds-tracking-tight: -0.015em;
  --ds-tracking-wide:   0.04em;

  --ds-space-2xs: 0.25rem;
  --ds-space-xs:  0.5rem;
  --ds-space-sm:  0.75rem;
  --ds-space-md:  1rem;
  --ds-space-lg:  1.5rem;
  --ds-space-xl:  2.5rem;
  --ds-space-2xl: 4rem;

  --ds-gutter:    clamp(1rem, 0.45rem + 2.4vw, 3rem);
  --ds-section-y: clamp(3rem, 1.50rem + 6.6vw, 10rem);
  --ds-container: 1280px;
  --ds-measure:   62ch;

  --ds-radius-sm:   6px;
  --ds-radius-md:   14px;
  --ds-radius-lg:   24px;
  --ds-radius-pill: 999px;

  --ds-dur-fast: .18s;
  --ds-dur-base: .40s;
  --ds-dur-slow: .90s;
  --ds-dur-fall: .80s;
  --ds-ease-out: cubic-bezier(.2, .7, .2, 1);
  --ds-ease-in:  cubic-bezier(.45, .05, .75, .2);
}

[data-ds-surface]{ color: var(--ds-text-color); }
.ds-paint{ background-color: var(--ds-surface-color); }

[data-ds-surface="white"],
[data-ds-surface="light"]{
  --ds-surface-color:   var(--ds-paper);
  --ds-text-color:      var(--ds-ink);
  --ds-title-color:     var(--ds-ink);
  --ds-muted-color:     var(--ds-ink-a60);
  --ds-mark-color:      var(--ds-red);
  --ds-accent:          var(--ds-red);
  --ds-accent-contrast: var(--ds-paper);
  --ds-border-color:    var(--ds-ink-a16);
  --ds-focus-color:     var(--ds-red);
}

[data-ds-surface="black"],
[data-ds-surface="dark"]{
  --ds-surface-color:   var(--ds-ink);
  --ds-text-color:      var(--ds-paper);
  --ds-title-color:     var(--ds-paper);
  --ds-muted-color:     var(--ds-paper-a70);
  --ds-mark-color:      var(--ds-red);
  --ds-accent:          var(--ds-red);
  --ds-accent-contrast: var(--ds-paper);
  --ds-border-color:    var(--ds-paper-a24);
  --ds-focus-color:     var(--ds-red);
}

[data-ds-surface="red"]{
  --ds-surface-color:   var(--ds-red);
  --ds-text-color:      var(--ds-paper);
  --ds-title-color:     var(--ds-paper);
  --ds-muted-color:     var(--ds-paper-a70);
  --ds-mark-color:      var(--ds-ink);
  --ds-accent:          var(--ds-ink);
  --ds-accent-contrast: var(--ds-paper);
  --ds-border-color:    var(--ds-paper-a24);
  --ds-focus-color:     var(--ds-ink);
}

.ds-mark-red   { --ds-mark-color:  var(--ds-red); }
.ds-mark-ink   { --ds-mark-color:  var(--ds-ink); }
.ds-mark-paper { --ds-mark-color:  var(--ds-paper); }
.ds-title-ink  { --ds-title-color: var(--ds-ink); }
.ds-title-paper{ --ds-title-color: var(--ds-paper); }

@media (pointer: coarse){
  html{
    -webkit-user-select: none;
            user-select: none;
    -webkit-touch-callout: none;
  }
  input,
  textarea,
  select,
  [contenteditable]{
    -webkit-user-select: text;
            user-select: text;
    -webkit-touch-callout: default;
  }
}