/* ==========================================================
   Nordwind Handels GmbH – Design Tokens v1.0 (Oktober 2026)
   Einbinden:
   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Syne:wght@600;700;800&family=Instrument+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap">
   <link rel="stylesheet" href="nordwind-tokens.css">
   ========================================================== */

:root {
  /* ---- Farben: Basis ---- */
  --nw-ice:        #EDF3F8;  /* Nordsee-Nebel – Seitenhintergrund */
  --nw-paper:      #F9FBFD;  /* Papier – Karten, Formularfelder */
  --nw-navy:       #0E2340;  /* Tiefsee – Text, Primärbuttons, Bänder */
  --nw-deep:       #081627;  /* Nachtwasser – dunkle Sektionen */
  --nw-steel:      #2F5E8E;  /* Sturmblau – Akzent, Links, Eyebrows */
  --nw-sky:        #86BDE6;  /* Böe – Akzent auf Dunkel, Verläufe */
  --nw-muted:      #4F6278;  /* Schiefer – Fließtext sekundär */

  /* ---- Farben: auf Dunkel ---- */
  --nw-on-dark:        #E6EEF6;
  --nw-on-dark-muted:  #9BB0C6;

  /* ---- Linien & Status ---- */
  --nw-line:        rgba(14, 35, 64, .13);
  --nw-line-dark:   rgba(230, 238, 246, .12);
  --nw-error:       #B4442F;
  --nw-success:     #2E7D5B;

  /* ---- Verläufe ---- */
  --nw-gradient-wind: linear-gradient(90deg, #2F5E8E, #86BDE6 60%, #2F5E8E);
  --nw-gradient-glow: radial-gradient(closest-side, rgba(47,94,142,.45), rgba(8,22,39,0));

  /* ---- Schrift ---- */
  --nw-font-display: "Syne", "Arial Narrow", system-ui, sans-serif;
  --nw-font-body:    "Instrument Sans", "Helvetica Neue", Arial, system-ui, sans-serif;
  --nw-font-mono:    "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;

  /* ---- Typo-Skala (fluid) ---- */
  --nw-text-hero:  clamp(46px, 8.4vw, 112px);  /* Syne 800, lh .92, ls -0.035em */
  --nw-text-h2:    clamp(34px, 5vw, 62px);     /* Syne 700, lh 1,   ls -0.02em  */
  --nw-text-h3:    24px;                       /* Syne 700, lh 1.1 */
  --nw-text-lead:  clamp(17px, 1.6vw, 20px);   /* Instrument Sans 400 */
  --nw-text-body:  16px;                       /* Instrument Sans 400, lh 1.6 */
  --nw-text-small: 14px;
  --nw-text-label: 12px;                       /* Plex Mono, UPPERCASE, ls .14em */

  /* ---- Abstände (4er-Raster) ---- */
  --nw-space-1: 4px;   --nw-space-2: 8px;   --nw-space-3: 12px;
  --nw-space-4: 16px;  --nw-space-5: 24px;  --nw-space-6: 32px;
  --nw-space-7: 48px;  --nw-space-8: 72px;  --nw-space-9: 128px;
  --nw-section-y: clamp(72px, 10vw, 128px);
  --nw-wrap: 1180px;

  /* ---- Radien ---- */
  --nw-radius-sm:   12px;   /* Felder */
  --nw-radius-md:   22px;   /* Panels, Hinweis-Karten */
  --nw-radius-lg:   26px;   /* Karten, Formulare */
  --nw-radius-pill: 999px;  /* Buttons, Tags */

  /* ---- Schatten & Effekte ---- */
  --nw-shadow-hover: 0 18px 40px -24px rgba(14, 35, 64, .35);
  --nw-focus-ring:   0 0 0 3px rgba(47, 94, 142, .15);
  --nw-glass:        blur(14px);
  --nw-fog:          blur(9px);

  /* ---- Bewegung ---- */
  --nw-ease:      cubic-bezier(.3, .7, .2, 1);
  --nw-dur-fast:  .2s;
  --nw-dur-base:  .35s;
  --nw-dur-slow:  1.1s;
}