/* ============================================================
   DEINKREDIT · Design Tokens · v1.0
   ------------------------------------------------------------
   In Elementor unter Custom Code → Header als <style>-Block
   einbinden, oder global per Theme Style mappen.
   Quelle: DeinKredit Design System.
   ============================================================ */

:root {
  /* === Markenfarben ============================================ */
  --dk-navy:         #15407A;
  --dk-navy-700:     #1A4E92;
  --dk-navy-900:     #0E2E58;
  --dk-blue:         #1668D6;
  --dk-blue-700:     #1257B5;
  --dk-blue-100:     #EAF1FB;
  --dk-blue-50:      #F4F8FD;

  /* === CTA · Orange (Standard) ================================= */
  --dk-orange:       #FF8A00;
  --dk-orange-700:   #E07300;
  --dk-orange-800:   #B85A00;
  --dk-orange-100:   #FFF1DD;

  /* === CTA · Magenta (Kampagne · Modern · App) ================= */
  --dk-magenta:      #E2007A;
  --dk-magenta-700:  #B0005F;
  --dk-magenta-800:  #800045;
  --dk-magenta-100:  #FCE4F0;

  /* === Trust-Grün (NUR Vertrauenselemente) ===================== */
  --dk-green:        #1FA971;
  --dk-green-700:    #168558;
  --dk-green-100:    #E6F6EE;

  /* === Hintergründe ============================================ */
  --dk-bg:           #FFFFFF;
  --dk-bg-tint:      #EAF1FB;
  --dk-bg-tint-soft: #F4F8FD;
  --dk-bg-cream:     #F7F4EF;   /* NUR Story-/Premium-Sektionen */
  --dk-bg-ink:       #0E2E58;

  /* === Text ==================================================== */
  --dk-text:         #0F2742;
  --dk-text-2:       #2A3C58;
  --dk-muted:        #5B6A82;
  --dk-muted-2:      #8794A8;
  --dk-on-dark:      #FFFFFF;
  --dk-on-dark-2:    #B7C7E0;

  /* === Linien ================================================== */
  --dk-line:         #E4E7EC;
  --dk-line-2:       #EFF1F4;
  --dk-line-on-dark: rgba(255,255,255,0.14);

  /* === Feedback ================================================ */
  --dk-success:       #1FA971;
  --dk-success-700:   #168558;
  --dk-success-100:   #E6F6EE;
  --dk-danger:        #D6334E;
  --dk-danger-700:    #A4253C;
  --dk-danger-100:    #FCE2E6;
  --dk-warning:       #E07300;
  --dk-warning-700:   #B85A00;
  --dk-warning-100:   #FFEFE3;
  --dk-info:          #1668D6;
  --dk-info-700:      #1257B5;
  --dk-info-100:      #EAF1FB;

  /* === Spacing (4-pt-Grid) ===================================== */
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-5: 20px;  --space-6: 24px;  --space-8: 32px;  --space-10: 40px;
  --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px;
  --space-32: 128px;

  /* === Radius ================================================== */
  --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px; --r-2xl: 28px;
  --r-pill: 999px;

  /* === Schatten ================================================ */
  --sh-xs: 0 1px 2px rgba(15,39,66,0.06);
  --sh-sm: 0 2px 8px -2px rgba(15,39,66,0.08), 0 1px 2px rgba(15,39,66,0.04);
  --sh-md: 0 10px 28px -10px rgba(15,39,66,0.14), 0 2px 6px rgba(15,39,66,0.05);
  --sh-lg: 0 24px 60px -20px rgba(15,39,66,0.22), 0 4px 12px rgba(15,39,66,0.06);
  --sh-xl: 0 40px 80px -32px rgba(15,39,66,0.28);
  --sh-glow-orange:  0 14px 40px -14px rgba(255,138,0,0.55);
  --sh-glow-magenta: 0 14px 40px -14px rgba(226,0,122,0.50);

  /* === Type-Stack ============================================= */
  --font-sans: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Inter", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;

  /* === Container ============================================== */
  --container: 1280px;
  --container-narrow: 1080px;
  --container-text:  760px;

  /* === Breakpoints (Referenz) ================================ */
  --bp-sm: 640px; --bp-md: 768px; --bp-lg: 1024px;
  --bp-xl: 1280px; --bp-2xl: 1440px;

  /* === Page-Mode (per <html data-mode="orange|magenta">) ===== */
  --dk-cta:          var(--dk-orange);
  --dk-cta-700:      var(--dk-orange-700);
  --dk-cta-100:      var(--dk-orange-100);
  --dk-cta-glow:     var(--sh-glow-orange);
  --dk-cta-eyebrow:  var(--dk-orange-700);
}

html[data-mode="magenta"] {
  --dk-cta:          var(--dk-magenta);
  --dk-cta-700:      var(--dk-magenta-700);
  --dk-cta-100:      var(--dk-magenta-100);
  --dk-cta-glow:     var(--sh-glow-magenta);
  --dk-cta-eyebrow:  var(--dk-magenta-700);
}
