/*
 * Tokens der Genossame Wangen.
 *
 * Werte 1:1 aus den Variablen des Figma-Masterfiles (get_variable_defs, Knoten
 * 2214:3019). Die Namen folgen Figma, damit eine Änderung dort hier ohne
 * Übersetzung nachgezogen werden kann. Was Figma nicht als Variable führt, steht
 * am Ende unter «abgeleitet».
 *
 * Darunter werden die Rückfallwerte von kit-base auf diese Tokens gelegt.
 */

/* ------------------------------------------------------------------ Schriften */

/*
 * Titel: Pacaembu (Plau). Kaufschrift; die Webfont-Lizenz fehlt noch.
 *
 * Ihre @font-face-Regeln gibt functions.php aus, und zwar nur für Dateien, die
 * unter assets/fonts/pacaembu-*.woff2 tatsächlich liegen. Stünden sie hier, lüde
 * jede Seite zwei Dateien, die es nicht gibt — mit 404 in der Konsole. Bis die
 * Schrift da ist, greift Lexend (OFL) als nächstliegende freie Schrift.
 */
@font-face {
  font-family: "Lexend";
  src: url("../fonts/lexend-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  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: "Lexend";
  src: url("../fonts/lexend-latin-ext.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  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;
}

/* Lauftext: Inter (OFL), variabel. */
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  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";
  src: url("../fonts/inter-latin-ext.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  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;
}

:root {
  /* ---------------------------------------------------------------- Farben */
  --weiss: #ffffff;
  --schwarz: #000000;
  --hellgrau: #ebebeb;
  --grau: #d7d7d7;

  --dunkelgruen-500: #2d7e46;
  --dunkelgruen-600: #226336;
  --dunkelgruen-700: #184c28;
  --dunkelgruen-text: #2d7e46;   /* Dunkelgruen/Text positive */

  --hellgruen-50: #e9fec7;
  --hellgruen-100: #d9fe93;
  --hellgruen-500: #9bc139;
  --hellgruen-600: #7a992b;

  --blau-50: #e8f2ff;
  --blau-200: #a1cdff;
  --blau-300: #65b7ff;
  --blau-400: #009def;
  --blau-500: #0085cb;
  --blau-700: #004f7c;
  --blau-900: #001f35;
  --blau-text: #003555;          /* Blau/Text positive */

  /* Verläufe laut Korrekturen: oben links hell, unten rechts dunkel. */
  --verlauf-gruen: linear-gradient(120deg, var(--hellgruen-500) 0%, var(--dunkelgruen-500) 81.712%);
  --verlauf-blau: linear-gradient(145deg, var(--blau-200) 28.225%, var(--blau-500) 100%);

  /* --------------------------------------------------------- Schriftgrössen */
  --text-xxs-xs: 0.75rem;   /* 12 */
  --text-xs: 1rem;          /* 16 */
  --text-xs-s: 1.125rem;    /* 18 */
  --text-s: 1.25rem;        /* 20 */
  --text-md: 1.5rem;        /* 24 */
  --text-lg: 2rem;          /* 32 */
  --text-xl: 2.5rem;        /* 40 */
  --text-xxl: 3.5rem;       /* 56 */

  --schrift-titel: "Pacaembu", "Lexend", system-ui, sans-serif;
  --schrift-text: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Figma-Sperrung 4 % (Titel), 5 % (Tag), 1 % (Button, Kachel). */
  --sperrung-titel: 0.04em;
  --sperrung-tag: 0.05em;
  --sperrung-klein: 0.01em;

  /* ----------------------------------------------------------- Abstände */
  --abstand-xxs: 4px;
  --abstand-xs: 8px;
  --abstand-s: 16px;
  --abstand-md: 20px;
  --abstand-lg: 24px;
  --abstand-xl: 32px;
  --abstand-xxl: 40px;
  --abstand-3xl: 56px;
  --abstand-5xl: 80px;
  --abstand-7xl: 120px;

  /* ------------------------------------------------------------ Schatten */
  /* Drop Shadow/300 (2214:3193) und /400 (2216:7419): Versatz 4 bzw. 4 + 16, Unschärfe 4 bzw. 4 + 32 */
  --schatten-300: 0 4px 4px -1px rgba(12, 12, 13, 0.05), 0 4px 4px -1px rgba(12, 12, 13, 0.1);
  --schatten-400: 0 4px 4px -4px rgba(12, 12, 13, 0.05), 0 16px 32px -4px rgba(12, 12, 13, 0.1);
  --schatten-600: 0 16px 32px -8px rgba(12, 12, 13, 0.4);

  /* ----------------------------------------------------------- abgeleitet */

  /*
   * Inhaltsbreiten aus dem 1728-px-Raster: 213 px Rand → 1302, 345 px → 1038,
   * 480 px → 768. Der seitliche Mindestrand für schmale Fenster ist abgeleitet.
   */
  --breite: 1302px;
  --breite-schmal: 1038px;
  --breite-eng: 768px;
  --rand: clamp(20px, 5vw, 80px);

  /* Fehlerzustand im Formular (kein Figma-Zustand). */
  --fehler: #b42318;

  /* Sektionsabstand 120 px auf Desktop; auf schmalen Schirmen abgeleitet. */
  --sektion: clamp(64px, 8vw, 120px);

  /*
   * Kopfbereich über die ganze Breite (Kundenwunsch 13.10.2026, wie Knies Kinderzoo):
   * Logo, Menü, Overlay, Hero-Titel und Fuss-Bildmarke stehen immer --rand vom Seitenrand,
   * auch auf breiten Schirmen. Bei 1728 entspricht das Figma (80 statt 81 px).
   */
  --kopf-breite: 100%;
  --kopf-hoehe: 75px;

  /* --------------------------------------------- kit-base auf die Tokens */
  --kit-farbe-text: var(--schwarz);
  --kit-farbe-gedaempft: #4b5563;
  --kit-farbe-flaeche: var(--weiss);
  --kit-farbe-flaeche-alt: var(--hellgrau);
  --kit-farbe-dunkel: var(--dunkelgruen-600);
  --kit-farbe-dunkel-text: var(--weiss);
  --kit-farbe-akzent: var(--hellgruen-500);
  --kit-farbe-rahmen: var(--grau);
  --kit-schrift: var(--schrift-text);
  --kit-schrift-titel: var(--schrift-titel);
  --kit-container: var(--breite);
  --kit-container-schmal: var(--breite-eng);
  --kit-radius: 0;
}