/* WAMO Group — design tokens. The palette is fixed: do not add colours outside these four. */

/* Headlines: Anton (SIL OFL). Text: TeX Gyre Adventor (GUST Font License). Tagline: Gloock (SIL OFL). Licences in assets/fonts. */
@font-face { font-family: "Anton"; src: url("../assets/fonts/anton-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Gloock"; src: url("../assets/fonts/gloock-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Adventor"; src: url("../assets/fonts/adventor-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Adventor"; src: url("../assets/fonts/adventor-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Adventor"; src: url("../assets/fonts/adventor-bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Adventor"; src: url("../assets/fonts/adventor-bolditalic.woff2") format("woff2"); font-weight: 700; font-style: italic; font-display: swap; }

:root {
  --stone: #E8E5E2;
  --charcoal: #242424;
  --peri: #BEC4D6;
  --slate: #353B4B;

  /* tints of the palette only */
  --peri-soft: color-mix(in srgb, var(--peri) 40%, var(--stone));
  --stone-deep: color-mix(in srgb, var(--stone) 90%, var(--charcoal));
  --muted: color-mix(in srgb, var(--charcoal) 72%, var(--stone));
  --line-soft: color-mix(in srgb, var(--charcoal) 22%, transparent);
  --rule: 1px solid var(--charcoal);

  --font-display: "Anton", "Bebas Neue", "Oswald", Impact, "Arial Narrow", sans-serif;
  --font-body: "Adventor", "Century Gothic", "Avant Garde", "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Gloock", "Didot", "Bodoni 72", Georgia, serif;

  --edge: 0px;          /* outer frame margin (desktop) */
  --pad: 16px;          /* cell padding */
  --hdr-h: 60px;
  --mbar-h: calc(58px + env(safe-area-inset-bottom));

  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.76, 0, .24, 1);
}

@media (min-width: 900px) {
  :root { --edge: clamp(14px, 1.5vw, 26px); --pad: clamp(20px, 2vw, 32px); --hdr-h: 88px; --mbar-h: 0px; }
}