/* Design-Tokens: Schriften und zentrale CSS-Variablen. */

@font-face {
  font-family: "Outfit";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/Outfit-Regular.woff2") format("woff2");
}

@font-face {
  font-family: "Outfit";
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/Outfit-SemiBold.woff2") format("woff2");
}

@font-face {
  font-family: "Outfit";
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/Outfit-Bold.woff2") format("woff2");
}

@font-face {
  font-family: "Fira Sans";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/FiraSans-Regular.woff2") format("woff2");
}

@font-face {
  font-family: "Fira Sans";
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/FiraSans-SemiBold.woff2") format("woff2");
}

@font-face {
  font-family: "Fira Sans";
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/FiraSans-Bold.woff2") format("woff2");
}

:root {
  --green-deep: #3a403c;
  --green-mid: #5e6863;
  --sage: #eef0ef;
  --ink: #363636;
  --paper: #ffffff;
  --hairline: #dddedf;
  --font: "Outfit", ui-sans-serif, system-ui, sans-serif;
  --text: 16px;
  --text-ui: 16px;
  --leading: 1.5;
  --leading-tight: 1.25;
  --kicker-track: 0.125em;
  --radius-logo: 5px;
  --radius-btn: 6px;
  --radius-ctrl: 8px;
  --radius-panel: 10px;
  --logo-h: 48px;
  --ctrl-h: 40px;
  --ctrl-fs: 15px;
  --ctrl-pad-x: 12px;
  --pad-btn: 0 20px;
  --pad-btn-sm: 0 15px;
  --wrap: 1300px;
  --header-h: 72px;
  --muted: rgba(54, 54, 54, 0.62);
  --on-green-soft: rgba(255, 255, 255, 0.75);
  --on-green-faint: rgba(255, 255, 255, 0.5);
  --open: #8a6a32;
  --open-soft: #efe6d4;
  --danger: #8a3a3a;
  --dur: 0.16s;
  --ease: ease;
  --person-alex: #2f6a88;
  --person-mia: #c45c32;
  --person-lea: #6b4f9a;
  --person-saskia: #5e6863;
  --person-admin: #6a6f6c;
  --thead-bg: color-mix(in srgb, var(--ink) 4.5%, var(--paper));
}