/*!
Theme Name: TEDesign (Kadence Child)
Theme URI: https://tedesign3d.de
Template: kadence
Author: TEDesign
Description: Child-Theme für die TEDesign-Website. Trägt die Design-Tokens aus dem Prototyp.
Version: 1.0.0
License: GNU General Public License v3.0 (or later)
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Text Domain: tedesign-child
*/

/* ==========================================================================
   TEDesign – Design-Tokens für WordPress
   Übernommen aus site/assets/css/tokens.css. Alle Kontrastwerte sind gegen
   WCAG 2.1 gerechnet und im Kommentar notiert.

   Die Farbwerte stehen hier als feste Hex-Werte und NICHT als Verweis auf
   Kadences --global-paletteN. Grund: Kadence hat die Palette auf fünfzehn
   benannte Plätze umgestellt (Akzent, Kontrast, Hintergrund, Hinweise),
   während die CSS-Variablen weiter bis neun durchnummeriert sind. Welche
   Nummer heute auf welchem Platz liegt, ist von außen nicht verlässlich
   bestimmbar. Ein falscher Verweis würde nicht auffallen, sondern still
   die falsche Farbe liefern – im schlimmsten Fall weißen Text auf weißem
   Grund.

   Dieselben Werte gehören zusätzlich in den Customizer, damit Kopfzeile,
   Fußzeile und Buttons dazu passen. Die Zuordnung steht in
   docs/wordpress-design-uebertragen.md, Abschnitt 2.
   ========================================================================== */

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

  /* --- Blau-Abstufungen --------------------------------------------------- */
  --te-blue-900:        #003D78;
  --te-blue-800:        #004E99;   /* 8.24:1 auf Weiß */
  --te-blue-700:        #0057AD;   /* 7.08:1 auf Weiß, Hover */
  --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 ---------------------------------------------------------
     Die Schriftfamilien setzt der Customizer (Darstellung → Customizer →
     Typografie). Saira trägt Überschriften, Inter den Fließtext. Beide
     müssen dort auf lokales Hosten gestellt sein, sonst lädt Kadence sie
     von Googles Servern – siehe docs/wordpress-design-uebertragen.md.

     Die beiden Namen bleiben trotzdem definiert, weil die Block-Patterns
     aus dem Prototyp sie verwenden. Sie zeigen auf Kadences eigene
     Variablen; sollte Kadence die einmal umbenennen, greift der
     Rückfallwert und die richtige Schrift steht trotzdem. */
  --font-display: var(--global-heading-font-family, "Saira", "Segoe UI", system-ui, -apple-system, sans-serif);
  --font-text:    var(--global-body-font-family, "Inter", "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.
     Kadence kennt nur drei feste Stufen je Breakpoint, deshalb stehen die
     clamp()-Werte hier – sie skalieren stufenlos statt in drei Sprüngen. */
  --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 entspricht der Inhaltsbreite im Customizer (1248 px).
     --container-text ist die Lesebreite für Artikel und hat in Kadence
     kein Gegenstück – sie wird in den Block-Patterns gesetzt. */
  --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.

   In WordPress bekommt eine Sektion diese Umschaltung über eine
   Zusatz-CSS-Klasse im Block-Editor: "is-dunkel" in das Feld
   Erweitert → Zusätzliche CSS-Klasse(n) eintragen. Das Attribut
   data-scheme aus dem Prototyp funktioniert weiter, falls es in einem
   Pattern steht. */
[data-scheme="dark"],
.is-dunkel {
  --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);
}

/* Damit eine so ausgezeichnete Sektion auch tatsächlich dunkel wird und
   nicht nur ihre Variablen umschaltet. */
.is-dunkel {
  background: var(--bg);
  color: var(--text);
}

/* --- Kanten statt Rundungen ------------------------------------------------
   Kadence liefert Buttons und Karten mit weichen Ecken aus. Die Marke lebt
   von harten Kanten, deshalb hier global zurückgenommen. */
.wp-block-button__link,
.kb-button,
.wp-block-kadence-advancedbtn .kb-button {
  border-radius: var(--radius);
}

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