/*
 * Design tokens for the public website.
 *
 * The palette has three colours. Plum carries structure and action. Teal carries
 * surfaces and a reached placement. The greys are tinted towards the plum, so the
 * quiet parts of the page belong to the same family.
 *
 * Every text pair below meets WCAG AA. The measured ratio stands in the comment.
 * Never put teal text on paper or on white. Teal is a surface, not a text colour.
 */

:root {
  /* Brand */
  --plum:       #643575; /* 9.1:1 on white, 8.2:1 on paper */
  --plum-dark:  #4E2A5C; /* hover and active, 10.4:1 on paper */
  --plum-tint:  #EFE9F1; /* wash behind a quoted block */
  --teal:       #98C1BF; /* surface only, 8.4:1 with ink on it */
  --teal-dark:  #3F6260; /* 6.7:1 on white, for a teal-toned label */
  --teal-tint:  #E8F1F0; /* wash behind a result block */

  /* Greys, tinted towards the plum */
  --ink:    #221E26; /* body text, 14.7:1 on paper */
  --muted:  #5E5865; /* secondary text, 6.2:1 on paper */
  --rule:   #D6D1DA; /* hairline, decorative only */
  --paper:  #F4F2F5; /* page background */
  --card:   #FFFFFF; /* raised surface */

  /* Type */
  --font-display: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

  --step--1: clamp(0.83rem, 0.81rem + 0.1vw, 0.88rem);
  --step-0:  clamp(1.0625rem, 1.04rem + 0.14vw, 1.125rem);
  --step-1:  clamp(1.2rem, 1.14rem + 0.3vw, 1.35rem);
  --step-2:  clamp(1.45rem, 1.32rem + 0.6vw, 1.75rem);
  --step-3:  clamp(1.75rem, 1.5rem + 1.2vw, 2.4rem);
  --step-4:  clamp(2.1rem, 1.6rem + 2.4vw, 3.4rem);

  /* Space, on a 4px base */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4.5rem;
  --s-9: 6.5rem;

  /* Shape */
  --radius: 4px;
  --radius-lg: 10px;
  --measure: 66ch;
  --page: 1140px;
}

/* Self-hosted faces. A German site must not request a font from a Google server. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../fonts/inter-latin-joy4ri1.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../fonts/inter-latin-ext-9fzmmZy.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url("../fonts/montserrat-latin-VBwFsq9.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url("../fonts/montserrat-latin-ext-YvxiiXN.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}