/* ==========================================================================
   Karín Requena — Design tokens
   Font files and hex values come straight from the brand Design System.
   ========================================================================== */

@font-face {
  font-family: "Galada";
  src: url("../fonts/Galada-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Glegoo";
  src: url("../fonts/Glegoo-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Bubbler One";
  src: url("../fonts/BubblerOne-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Hubot Sans";
  src: url("../fonts/HubotSans-Variable.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-stretch: 75% 125%;
  font-style: normal;
  font-display: swap;
}

:root {
  /* brand colors */
  --blau: #416681;       --blau-hover: #5F7E95;   --blau-active: #35546A;   --blau-tint: #E8EDF0;
  --mari: #192E40;       --mari-hover: #3E4F5F;   --mari-active: #142634;   --mari-tint: #E3E6E8;
  --safra: #F2AF2F;      --safra-hover: #F4BC50;  --safra-active: #C69027;  --safra-tint: #FDF5E6;
  --terra: #BF3434;      --terra-hover: #C95454;  --terra-active: #9D2B2B;  --terra-tint: #F7E7E7;
  --gamba: #F24444;      --gamba-hover: #F46262;  --gamba-active: #C63838;  --gamba-tint: #FDE9E9;
  --white: #FFFFFF;
  --ink: #000000;

  /* semantic */
  --bg: var(--white);
  --text: var(--mari);
  --text-soft: var(--blau);
  --border: #D7DEE3;
  --rule: #C9D3D9;
  --accent: var(--gamba);
  --accent-2: var(--safra);

  /* type */
  --font-display: "Galada", "Segoe Script", cursive;
  --font-h2: "Glegoo", Georgia, "Times New Roman", serif;
  --font-h3: "Hubot Sans", "Arial Narrow", sans-serif;
  --font-body: "Hubot Sans", "Helvetica Neue", Arial, sans-serif;
  --font-quote: "Bubbler One", "Comic Sans MS", cursive;

  /* layout */
  --container: 1160px;
  --container-narrow: 720px;
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px;
}