/* ==========================================================================
   TEDesign – Design-Tokens
   Einzige Quelle für Farbe, Typografie, Abstände und Radien.
   Alle Kontrastwerte sind gegen WCAG 2.1 gerechnet und im Kommentar notiert.
   ========================================================================== */

:root {
  /* --- Markenfarben (Markenblatt) --------------------------------------- */
  --te-blue:            #0066CC;   /* Primärfarbe */
  --te-silver:          #C0C0C0;   /* nur dekorativ – 1.82:1 auf Weiß */
  --te-ink:             #1A1A1A;   /* Grundton dunkel */

  /* --- Blau-Abstufungen --------------------------------------------------
     #0066CC hat 5.57:1 auf Weiß und trägt damit auch Fließtext (AA ab 4.5).
     Auf dunklem Grund reicht es mit 3.13:1 NICHT – dort greift --te-blue-300. */
  --te-blue-900:        #003D78;
  --te-blue-800:        #004E99;   /* 8.24:1 auf Weiß */
  --te-blue-700:        #0057AD;   /* 7.08:1 auf Weiß – Hover für Links */
  --te-blue-600:        #0066CC;   /* = --te-blue */
  --te-blue-500:        #1A79D6;
  --te-blue-400:        #3389DB;
  --te-blue-300:        #4D9BE6;   /* 5.92:1 auf --te-ink – Text auf Dunkel */
  --te-blue-200:        #66AFF0;   /* 7.42:1 auf --te-ink */
  --te-blue-100:        #D6E8FA;
  --te-blue-050:        #EFF6FD;

  /* --- Neutrale Töne ------------------------------------------------------ */
  --te-n-000:           #FFFFFF;
  --te-n-050:           #F5F6F7;
  --te-n-100:           #E3E6E9;
  --te-n-200:           #CDD2D8;
  --te-n-300:           #AEB5BE;
  --te-n-400:           #8A8F98;   /* 5.36:1 auf --te-ink */
  --te-n-500:           #6B7280;
  --te-n-600:           #5A6472;   /* 6.00:1 auf Weiß – Sekundärtext */
  --te-n-700:           #3D4552;
  --te-n-800:           #262B33;
  --te-n-900:           #1A1A1A;   /* = --te-ink */
  --te-n-950:           #101215;

  /* --- Signalfarben ------------------------------------------------------- */
  --te-ok:              #1F7A44;   /* 5.35:1 auf Weiß */
  --te-ok-bg:           #ECF7F0;
  --te-error:           #B3261E;   /* 6.54:1 auf Weiß */
  --te-error-bg:        #FCEEED;

  /* --- Semantische Zuweisung: heller Grund -------------------------------- */
  --bg:                 var(--te-n-000);
  --bg-subtle:          var(--te-n-050);
  --bg-inset:           var(--te-n-100);
  --surface:            var(--te-n-000);
  --border:             var(--te-n-100);
  --border-strong:      var(--te-n-200);

  --text:               var(--te-n-900);   /* 17.40:1 auf Weiß */
  --text-muted:         var(--te-n-600);   /*  6.00:1 auf Weiß */
  --text-on-accent:     var(--te-n-000);   /*  5.57:1 auf --te-blue */

  --accent:             var(--te-blue-600);
  --accent-hover:       var(--te-blue-700);
  --accent-soft:        var(--te-blue-050);

  --focus-ring:         var(--te-blue-700);

  /* --- Typografie ---------------------------------------------------------
     --font-display trägt Überschriften und Logo-Umfeld,
     --font-text den Fließtext. Beide werden selbst gehostet (kein CDN).
     Die Systemschriften stehen als Fallback dahinter, damit der Prototyp
     auch ohne geladene Webfont-Dateien korrekt umbricht. */
  --font-display: "TEDisplay", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-text:    "TEText", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono:    ui-monospace, "Cascadia Mono", Consolas, monospace;

  /* Fluide Typo-Skala: min bei 360 px, max bei 1280 px Viewport */
  --fs-xs:    0.8125rem;                                   /* 13px */
  --fs-sm:    0.875rem;                                    /* 14px */
  --fs-base:  clamp(1rem, 0.96rem + 0.18vw, 1.0625rem);    /* 16 → 17px */
  --fs-md:    clamp(1.125rem, 1.06rem + 0.28vw, 1.25rem);  /* 18 → 20px */
  --fs-lg:    clamp(1.375rem, 1.24rem + 0.57vw, 1.75rem);  /* 22 → 28px */
  --fs-xl:    clamp(1.75rem, 1.5rem + 1.09vw, 2.5rem);     /* 28 → 40px */
  --fs-2xl:   clamp(2.25rem, 1.84rem + 1.79vw, 3.5rem);    /* 36 → 56px */
  --fs-3xl:   clamp(2.75rem, 2.05rem + 3.04vw, 4.75rem);   /* 44 → 76px */

  --lh-tight:  1.08;
  --lh-snug:   1.25;
  --lh-normal: 1.6;
  --lh-loose:  1.75;

  --ls-tight:  -0.02em;
  --ls-normal: 0;
  --ls-wide:   0.08em;
  --ls-wider:  0.16em;   /* Tagline-Sperrung wie im Logo */

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-black:    800;

  /* --- Abstände (4-px-Raster) --------------------------------------------- */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.5rem;
  --sp-6:  2rem;
  --sp-7:  2.5rem;
  --sp-8:  3rem;
  --sp-9:  4rem;
  --sp-10: 5rem;
  --sp-11: 6.5rem;
  --sp-12: 8rem;

  --section-y: clamp(3.5rem, 2.4rem + 4.8vw, 7rem);

  /* --- Layout ------------------------------------------------------------- */
  --container:      78rem;   /* 1248px */
  --container-text: 44rem;   /*  704px – Lesebreite für Artikel */
  --gutter:         clamp(1.25rem, 0.9rem + 1.6vw, 2.5rem);

  /* --- Radien und Kanten --------------------------------------------------
     Bewusst klein: die Marke lebt von harten 45-Grad-Kanten. */
  --radius-sm: 2px;
  --radius:    3px;
  --radius-lg: 4px;

  /* --- Schatten ----------------------------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(16, 18, 21, 0.06);
  --shadow:    0 2px 8px rgba(16, 18, 21, 0.08);
  --shadow-lg: 0 12px 32px rgba(16, 18, 21, 0.12);

  /* --- Bewegung ----------------------------------------------------------- */
  --ease:     cubic-bezier(0.2, 0, 0, 1);
  --dur-fast: 120ms;
  --dur:      200ms;
}

/* --- Dunkle Abschnitte -----------------------------------------------------
   Kein Dark Mode der ganzen Seite, sondern gezielt invertierte Sektionen
   (Hero, Footer, Zitatflächen). Auf --te-ink greifen andere Blaustufen,
   weil #0066CC dort nur 3.13:1 erreicht und AA verfehlt. */
[data-scheme="dark"] {
  --bg:            var(--te-n-900);
  --bg-subtle:     var(--te-n-800);
  --bg-inset:      var(--te-n-950);
  --surface:       var(--te-n-800);
  --border:        #2E343D;
  --border-strong: #3D4552;

  --text:          var(--te-n-000);   /* 17.40:1 */
  --text-muted:    var(--te-n-400);   /*  5.36:1 */
  --text-on-accent: var(--te-n-000);

  --accent:        var(--te-blue-300); /* 5.92:1 auf --te-ink */
  --accent-hover:  var(--te-blue-200); /* 7.42:1 */
  --accent-soft:   #14243A;

  --focus-ring:    var(--te-blue-200);
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur: 0ms; }
}