/* ==========================================================================
   tokens.css — Design-Tokens Website-Relaunch particulate.de
   Quelle: Style Guide Particulate (verbindlich für Farbe + Typografie).
   Bauweise-Anpassungen lt. decisions.md: K8a (Buttonform 8px), K9a (Kontrast).
   Produkt-UI-Tokens liegen strikt getrennt in product-ui.css (--app-*).
   ========================================================================== */

/* ---------- Fonts (self-hosted, variable WOFF2) ---------- */
@font-face {
  font-family: "Jost"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("../assets/fonts/jost-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212;
}
@font-face {
  font-family: "Jost"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("../assets/fonts/jost-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-024F, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0;
}
@font-face {
  font-family: "Noto Serif"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("../assets/fonts/notoserif-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212;
}
@font-face {
  font-family: "Noto Serif"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("../assets/fonts/notoserif-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-024F, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0;
}
@font-face {
  font-family: "Noto Serif"; font-style: italic; font-weight: 100 900; font-display: swap;
  src: url("../assets/fonts/notoserif-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212;
}
@font-face {
  font-family: "Noto Serif"; font-style: italic; font-weight: 100 900; font-display: swap;
  src: url("../assets/fonts/notoserif-italic-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-024F, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0;
}

:root {
  /* ---------- Marke ---------- */
  --navy: #031d40;
  --navy-900: #02132b;
  --navy-700: #0a3a75;
  --blue: #2961e1;
  --blue-deep: #1f4dbd;
  --blue-050: #eef3fd;
  --blue-100: #dbe6fb;
  /* Lime NUR als Fläche auf dunklen Gründen, Text darauf immer Navy.
     Nie als Textfarbe oder Icon auf hellem Grund (K9a). */
  --lime: #e9fe53;
  --lime-deep: #d6ef1f;
  /* Formularfelder (29.09.): Hauch Tönung, feine Linie, Fokus = nur dunklere Linie, kein Farbring */
  --field-bg: rgba(3, 29, 64, 0.025);
  --field-line: rgba(3, 29, 64, 0.13);
  --field-line-focus: rgba(3, 29, 64, 0.34);
  --field-bg-dark: rgba(230, 237, 250, 0.06);
  --field-line-dark: rgba(230, 237, 250, 0.22);
  --field-line-dark-focus: rgba(230, 237, 250, 0.55);
  --mint: #70f0bf;
  --mint-text: #0a7c55;
  --pink: #ff4d81;
  --pink-deep: #d01e63;

  /* App-Akzente — nur als Mikro-Signal einsetzen (K10a): Icon, Dot, Kicker, 1 Linie */
  --c-grant: #2961e1;
  --c-show: #ff4d81;
  --c-share: #00d5a4;
  --c-fund: #735dfb;
  --c-vote: #19b8e8;
  --c-part: #a3b400;

  /* ---------- Text & Flächen ---------- */
  --ink: #071c3d;
  --text: #3f5170;
  --text-soft: #5f7191;
  --bg: #ffffff;
  --bg-cool: #f7f9fd;
  --bg-cool-tint: #e9f0fc;
  --line: #dfe6f3;
  --line-soft: #ebf0f9;
  --line-input: #b9c4d6;          /* K9a: Formular-Borders ≥3:1 auf Weiß */
  --bg-warm: #fdf6f2;
  --bg-warm-tint: #fbeff3;
  --line-warm: #f3e2d8;
  --warm-label: #a04468;
  --on-navy: #e6edfa;
  --on-navy-soft: #a8bcdd;
  --line-dark: rgba(230, 237, 250, 0.14);

  /* ---------- Typografie ---------- */
  --font-sans: "Jost", system-ui, -apple-system, sans-serif;
  --font-serif: "Noto Serif", Georgia, serif;
  --font-label: var(--font-sans);   /* Labels, Kicker, Ticker: Jost in gesperrten Versalien, keine Mono-Webfont */
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;   /* nur echter Code (.ab-code), Systemschrift */
  --fs-hero: clamp(2.7rem, 1.4rem + 4.8vw, 5.2rem);
  --fs-d2: clamp(2rem, 1.35rem + 2.6vw, 3.4rem);
  --fs-d3: clamp(1.5rem, 1.22rem + 1.3vw, 2.1rem);
  --fs-lead: 1.1875rem;
  --fs-body: 1.0625rem;
  --fs-small: 0.9rem;
  --fs-label: 0.75rem;

  /* ---------- Raster ---------- */
  --s-1: 0.5rem;  --s-2: 1rem;  --s-3: 1.5rem;  --s-4: 2rem;
  --s-6: 3rem;    --s-8: 4rem;  --s-10: 5rem;   --s-12: 6rem;  --s-16: 8rem;
  --container: 82rem;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --header-h: 3.75rem;

  /* ---------- Form (K8a: keine Pills auf der Website) ---------- */
  --r-s: 8px;
  --r-m: 12px;
  --r-l: 16px;
  --r-btn: var(--r-s);            /* Buttons: kompaktes Rechteck */
  --btn-h: 3rem;                  /* 48px */
  --btn-h-lg: 3.25rem;            /* 52px */
  --btn-h-sm: 2.5rem;             /* 40px */

  /* ---------- Effekte ---------- */
  --shadow-1: 0 1px 2px rgba(7, 28, 61, 0.05);
  --shadow-2: 0 2px 4px rgba(7, 28, 61, 0.04), 0 18px 44px -22px rgba(7, 28, 61, 0.2);
  --shadow-blue: 0 2px 6px rgba(41, 97, 225, 0.06), 0 26px 54px -26px rgba(41, 97, 225, 0.35);
  --shadow-warm: 0 2px 4px rgba(160, 68, 104, 0.05), 0 18px 44px -24px rgba(160, 68, 104, 0.28);
  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4.5px var(--blue);
  --focus-ring-dark: 0 0 0 2px var(--navy), 0 0 0 4.5px var(--lime); /* K9a */

  /* ---------- Motion ---------- */
  --ease: cubic-bezier(0.32, 0.72, 0.24, 1);
  --ease-out: cubic-bezier(0.16, 0.84, 0.3, 1);
  --t-fast: 0.18s;
  --t-med: 0.38s;
  --t-slow: 0.6s;
}