/* templates/frontend/datanet-pro/assets/css/tokens.css
 *
 * Design-Tokens für das Theme "datanet-pro".
 *
 * Eigenständiges Theme für die dataNet.ovh-Website: eine Infrastruktur-/
 * Hosting-Firma, die ihre komplette Hardware selbst in Hemer betreibt. Die
 * Bildsprache ist bewusst "eigene Eisen, eigene Kontrolle": tiefes Slate-Navy
 * für Anker-Bänder (Hero, Kennzahlen, CTA, Footer), kühles Papier für die
 * Inhaltsflächen, EIN kräftiger Kupfer-Signal-Akzent. Typografie: IBM Plex
 * Sans (UI/Text) + IBM Plex Mono (echte technische Daten wie Repo-URLs/apt).
 *
 * Alle Farbwerte auf WCAG-Kontrast geprüft: Kupfer (--dn-signal) erreicht auf
 * Weiß keinen Normaltext-Kontrast und wird deshalb NUR für Flächen, Icons und
 * große/fette Akzente genutzt - für Link-/Fließtext auf Hell dient
 * --dn-steel. Das helle Signal-Kupfer bleibt dem einen "lauten" Element
 * vorbehalten.
 */

:root {
  /* --- Kern-Palette --- */
  --dn-ink:        #0E1A24;   /* Anker-Bänder: Hero, Kennzahlen, CTA, Footer */
  --dn-ink-2:      #0A141C;   /* dunkler noch - Panels/Code auf Ink */
  --dn-paper:      #F4F6F7;   /* kühle Grundfläche (kein Creme) */
  --dn-surface:    #FFFFFF;   /* Karten/Panels auf Papier */
  --dn-surface-2:  #EEF2F4;   /* leicht abgesetzte Fläche */
  --dn-signal:     #E1662E;   /* Kupfer - der EINE laute Akzent (Flächen/Icons/große Akzente) */
  --dn-signal-deep:#C0511F;   /* Hover/aktiv */
  --dn-steel:      #176A87;   /* Stahlblau - Links/Fließtext-Akzente auf Hell (5:1 auf Weiß) */
  --dn-steel-deep: #0F4E64;
  --dn-line:       #D7DFE3;   /* Hairline auf Hell */
  --dn-line-ink:   #22323F;   /* Hairline auf Ink */
  --dn-text:       #132029;   /* Fließtext auf Hell */
  --dn-muted:      #51626C;   /* sekundärer Text auf Hell (~5.2:1) */
  --dn-muted-ink:  #96AAB5;   /* sekundärer Text auf Ink */
  --dn-ok:         #3FB27F;   /* Status "in Betrieb" */

  /* --- Typografie --- */
  --dn-font:  "IBM Plex Sans", -apple-system, "Segoe UI", Arial, sans-serif;
  --dn-mono:  "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* --- Maße --- */
  --dn-wrap:   1180px;
  --dn-radius: 10px;
  --dn-radius-sm: 6px;
  --dn-radius-lg: 16px;
  --dn-pad-y:  clamp(3.25rem, 6vw, 5.75rem);

  /* --- Abstände --- */
  --dn-s1: .25rem;  --dn-s2: .5rem;  --dn-s3: .75rem;  --dn-s4: 1rem;
  --dn-s5: 1.25rem; --dn-s6: 1.5rem; --dn-s8: 2rem;    --dn-s10: 2.5rem;
  --dn-s12: 3rem;   --dn-s16: 4rem;

  /* --- Schatten --- */
  --dn-shadow-sm: 0 1px 3px rgba(14,26,36,.07);
  --dn-shadow:    0 6px 20px -8px rgba(14,26,36,.18);
  --dn-shadow-lg: 0 24px 60px -30px rgba(10,20,28,.8);

  /* ============================================================
     Alias-Zuordnung für Erweiterungen.
     Blog, Nopaste, FAQ, Formulare, Shortcode-Boxen usw. nutzen fest
     die --nx-*-Variablennamen des Standard-Themes. Damit sie in
     datanet-pro den neuen Look erben (und nicht auf ungültige, weil
     undefinierte Variablen laufen), werden hier ALLE bekannten
     --nx-*-Namen auf die echten datanet-pro-Werte abgebildet.
     --nx-primary ist bewusst Stahlblau (nicht Kupfer): Erweiterungen
     setzen es auch für Link-/Fließtext, der auf Weiß ausreichend
     Kontrast braucht - Kupfer bleibt den Theme-eigenen CTAs vorbehalten.
     ============================================================ */
  --nx-primary:       var(--dn-steel);
  --nx-primary-dark:  var(--dn-steel-deep);
  --nx-on-primary:    #ffffff;
  --nx-text:          var(--dn-text);
  --nx-muted:         var(--dn-muted);
  --nx-bg:            var(--dn-paper);
  --nx-surface:       var(--dn-surface);
  --nx-surface-soft:  var(--dn-surface-2);
  --nx-border:        var(--dn-line);
  --nx-secondary:     var(--dn-surface-2);
  --nx-danger:  #C0392B;
  --nx-success: #2E7D32;
  --nx-warning: #B8860B;
  --nx-info:    var(--dn-steel);
  --nx-font-body:    var(--dn-font);
  --nx-font-heading: var(--dn-font);
  --nx-space-1: var(--dn-s1); --nx-space-2: var(--dn-s2); --nx-space-3: var(--dn-s3);
  --nx-space-4: var(--dn-s4); --nx-space-6: var(--dn-s6); --nx-space-8: var(--dn-s8);
  --nx-space-12: var(--dn-s12); --nx-space-16: var(--dn-s16);
  --nx-fs-sm: .9rem;  --nx-fs-base: 1rem; --nx-fs-lg: 1.15rem;
  --nx-fs-xl: 1.4rem; --nx-fs-2xl: 1.85rem; --nx-fs-3xl: 2.4rem;
  --nx-lh-base: 1.65; --nx-lh-heading: 1.15;
  --nx-radius: var(--dn-radius); --nx-radius-sm: var(--dn-radius-sm); --nx-radius-lg: var(--dn-radius-lg);
  --nx-shadow-sm: var(--dn-shadow-sm); --nx-shadow: var(--dn-shadow); --nx-shadow-lg: var(--dn-shadow-lg);
  --nx-max-width: var(--dn-wrap);

  /* Zusätzlich die --dv-*-Namen (danvo) abbilden: falls Inhalte mit
     danvo-Inline-Styles (var(--dv-*)) übernommen werden, brechen sie
     dadurch nicht, sondern erscheinen im datanet-pro-Farbschema. */
  --dv-primary: var(--dn-steel);
  --dv-primary-dark: var(--dn-steel-deep);
  --dv-text: var(--dn-text);
  --dv-muted: var(--dn-muted);
  --dv-bg: var(--dn-paper);
  --dv-surface: var(--dn-surface);
  --dv-surface-soft: var(--dn-surface-2);
  --dv-border: var(--dn-line);
  --dv-accent-soft: var(--dn-signal);
  --dv-font-body: var(--dn-font);
  --dv-radius: var(--dn-radius);
  --dv-radius-lg: var(--dn-radius-lg);
  --dv-space-1: var(--dn-s1); --dv-space-2: var(--dn-s2); --dv-space-3: var(--dn-s3);
  --dv-space-4: var(--dn-s4); --dv-space-6: var(--dn-s6); --dv-space-8: var(--dn-s8);
  --dv-space-12: var(--dn-s12);
  --dv-fs-sm: .9rem; --dv-fs-base: 1rem; --dv-fs-lg: 1.15rem;
  --dv-container-width: var(--dn-wrap);
}