/* =========================================================================
   Benker Packaging — Design-Tokens
   Quelle: Figma UI-Datei cLaDdmazE9SapGDZCaEM5n, Startseite-Node 105:5680
   Single Source of Truth bleibt Figma. Werte hier nur pflegen, wenn sie
   in Figma final geaendert wurden.
   ========================================================================= */

:root {
  /* -----------------------------------------------------------------------
     Farben (aus Figma uebernommen)
     ----------------------------------------------------------------------- */
  --color-neutral-100: #ffffff;
  --color-neutral-200: #f1f1f1;
  --color-neutral-300: #f9fafc;
  --color-neutral-600: #526075;
  --color-neutral-800: #080808;

  --color-primary-800: #005ba8;
  --color-primary-900: #002756; /* dunkles Navy (Footer-Verlauf-Start, aus Figma 181:1949) */

  --color-green-3: #6fcf97;

  /* Gradient/Blue — Wert aus Figma (benker07082026) ausgelesen: Node 226:5370,
     Trust-Badge-Icons. Horizontaler Verlauf navy -> primary-800 (links -> rechts). */
  --gradient-blue: linear-gradient(90deg, var(--color-primary-900), var(--color-primary-800));

  /* Semantische Aliase — Komponenten referenzieren diese, nicht die Rohwerte */
  --color-bg: var(--color-neutral-100);
  --color-bg-subtle: var(--color-neutral-300);
  --color-bg-muted: var(--color-neutral-200);
  --color-text: var(--color-neutral-800);
  --color-text-muted: var(--color-neutral-600);
  --color-accent: var(--color-primary-800);
  --color-success: var(--color-green-3);
  /* Glas-Oberflaeche der Trust-Karten (Über-Uns, Figma 226:5370): Weiss @ 90 % */
  --color-surface-glass: rgba(255, 255, 255, 0.9);

  /* -----------------------------------------------------------------------
     Typografie
     Die originalen Figma-Schriften, beide unter SIL Open Font License (OFL)
     und selbst gehostet (kein CDN -> Rechtssicherheit):
       Ueberschriften: Elms Sans (variabel, wght-Achse)
       Fliesstext:     Google Sans Flex (OFL-Release von Google Sans, variabel)
     Lizenztexte liegen als OFL.txt neben den Schriften in public/fonts/.
     system-ui bleibt als Fallback.
     ----------------------------------------------------------------------- */
  --font-heading: "Elms Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Google Sans Flex", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Font-Sizes (px-Werte aus Figma) */
  --fs-heading-xl: 48px;   /* Heading/XL  — 700 */
  --fs-heading-l: 36px;    /* Heading/L   — 500 */
  --fs-heading-m: 32px;    /* Heading/M   — 500 */
  --fs-heading-s: 26px;    /* Heading/S   — 700 */
  --fs-heading-xs: 24px;   /* Heading/XS  — 600 */
  --fs-heading-2xs: 20px;  /* Heading/2XS — 500 */
  --fs-heading-3xs: 18px;  /* Heading/3XS — 600 */
  --fs-heading-5xs: 14px;  /* Heading/5XS — 600 */
  --fs-body-l: 18px;       /* Body/L  — 400 */
  --fs-body-m: 16px;       /* Body/M  — 400 */
  --fs-body-s: 14px;       /* Body/S  — 500 */
  --fs-body-xs: 12px;      /* Body/XS — 400 */

  /* Line-Heights (aus Figma) */
  --lh-heading-xl: 1.035;
  --lh-heading-l: 1.1;
  --lh-heading-m: 1.1;
  --lh-heading-s: 1.25;
  --lh-heading-xs: 1.25;
  --lh-heading-2xs: 1.1;
  --lh-heading-3xs: 1.25;
  --lh-heading-5xs: 1.25;
  --lh-body-l: 1.4;
  --lh-body-m: 1.4;
  --lh-body-s: 1.5;
  --lh-body-xs: 1.3;

  /* Font-Weights */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* Letter-Spacing
     Figma exportiert einheitlich "-2" ohne Einheit. Als Prozentwert
     interpretiert = -0.02em. TODO(Figma): in Figma gegenpruefen. */
  --tracking-tight: -0.02em;

  /* -----------------------------------------------------------------------
     Spacing
     TODO(Figma): Spacing liegt in Figma NICHT als Variablen vor, nur als
     Auto-Layout-Zahlen. Diese 4px-Basis-Skala ist ein Vorschlag und muss
     gegen die tatsaechlichen Abstaende im Layout verifiziert werden.
     ----------------------------------------------------------------------- */
  --space-1: 0.25rem;   /* 4px  */
  --space-2: 0.5rem;    /* 8px  */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.5rem;    /* 24px */
  --space-6: 2rem;      /* 32px */
  --space-7: 3rem;      /* 48px */
  --space-8: 4rem;      /* 64px */
  --space-9: 6rem;      /* 96px */
  --space-10: 8rem;     /* 128px */

  /* -----------------------------------------------------------------------
     Radius — TODO(Figma): gegen Figma verifizieren
     ----------------------------------------------------------------------- */
  --radius-sm: 6px;
  --radius-image: 8px;  /* grosse Bildflaechen (Figma 226:5370) */
  --radius-card: 10px;  /* Glas-Karten / Media-Boxen (Figma 226:5370) */
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-full: 9999px;

  /* -----------------------------------------------------------------------
     Schatten (aus Figma: "card shadow")
     ----------------------------------------------------------------------- */
  --shadow-card: 0 12px 30px 0 rgba(0, 0, 0, 0.07); /* #00000012 ~ 7% */

  /* Backdrop-Blur der Glas-Karten (Figma 226:5370: 8.45px, gerundet auf 8px) */
  --blur-glass: 8px;

  /* -----------------------------------------------------------------------
     Layout
     ----------------------------------------------------------------------- */
  --container-max: 1280px; /* Figma-Design-Breite (80px Seiteninset entsteht ab
                              1440px-Viewport als auto-Margin, nicht als Padding) */
  --container-pad: var(--space-5); /* mobile-first Seitenpadding fuer schmale Screens */

  /* Gemeinsame Inhaltsbreite = Breite der weissen Hero-Karte (Figma 231:6668:
     1440 - 2x24 = 1392px). Sektionen fluchten ueber .content-band buendig zur
     Hero-Karte. Seiten-Inset wie die Hero-Bande: 12px mobil, 24px ab 1024px. */
  --content-max: 1392px;
}