/* ============================================================
   CX-UI — Design Tokens
   Single Source of Truth fuer alle Custom-PHP-Portale.
   Abgeleitet aus dem Polling-Trio (bundestagwahlumfrage/
   uspollingdata/britpolls), normalisiert.

   NICHT pro Site editieren. Site-spezifisch ist NUR
   --cx-accent / --cx-accent-hover (siehe brand.php).
   ============================================================ */

:root {
  /* --- Neutrals (fix, ueberall identisch) --- */
  --cx-white:        #ffffff;
  --cx-bg:           #ffffff;
  --cx-bg-alt:       #f8f9fa;
  --cx-bg-dark:      #111827;
  --cx-text:         #1a1a1a;
  --cx-text-mid:     #4b5563;
  --cx-text-light:   #6b7280;
  --cx-text-faint:   #9ca3af;
  --cx-border:       #e5e7eb;
  --cx-border-light: #f0f0f0;
  --cx-border-dark:  #d1d5db;

  /* --- Akzent (EINZIGER Site-Hebel, in brand.php ueberschreiben) --- */
  --cx-accent:        #2563eb;
  --cx-accent-hover:  #1d4ed8;
  --cx-accent-light:  #eff6ff;

  /* --- Semantik --- */
  --cx-success:       #16a34a;
  --cx-success-light: #f0fdf4;
  --cx-warn:          #d97706;
  --cx-warn-light:    #fffbeb;
  --cx-danger:        #dc2626;
  --cx-danger-light:  #fef2f2;

  /* --- Spacing-Skala (loest 10 verschiedene Section-Paddings ab) --- */
  --cx-s1:  4px;
  --cx-s2:  8px;
  --cx-s3:  12px;
  --cx-s4:  16px;
  --cx-s5:  24px;
  --cx-s6:  32px;
  --cx-s7:  48px;
  --cx-s8:  64px;
  --cx-s9:  80px;

  /* --- Radius --- */
  --cx-r-sm:   6px;
  --cx-r:      8px;
  --cx-r-lg:   12px;
  --cx-r-xl:   18px;
  --cx-r-full: 999px;

  /* --- Shadow --- */
  --cx-sh-sm: 0 1px 2px rgba(0,0,0,.05);
  --cx-sh:    0 1px 3px rgba(0,0,0,.08);
  --cx-sh-lg: 0 4px 12px rgba(0,0,0,.10);
  --cx-sh-xl: 0 12px 32px rgba(0,0,0,.12);

  /* --- Typo --- */
  --cx-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --cx-fs-xs:  0.75rem;    /* 12px */
  --cx-fs-sm:  0.8125rem;  /* 13px */
  --cx-fs-base:0.875rem;   /* 14px */
  --cx-fs-md:  1rem;       /* 16px */
  --cx-fs-lg:  1.125rem;   /* 18px */
  --cx-fs-xl:  1.375rem;   /* 22px */
  --cx-fs-2xl: 1.75rem;    /* 28px */
  --cx-fs-3xl: 2.25rem;    /* 36px */
  --cx-fs-4xl: 3rem;       /* 48px */
  --cx-lh:      1.6;
  --cx-lh-tight:1.25;

  /* --- Layout --- */
  --cx-max:      1200px;
  --cx-gutter:   24px;
  --cx-header-h: 64px;
  --cx-sec:      64px;   /* vertikaler Section-Abstand Desktop */

  /* --- Motion --- */
  --cx-t:      .15s ease;
  --cx-t-slow: .25s ease;
}

/* Breakpoints sind fix: 480 / 768 / 1024. Keine anderen Werte verwenden. */
@media (max-width: 768px) {
  :root {
    --cx-gutter:   16px;
    --cx-sec:      48px;
    --cx-header-h: 56px;
    --cx-fs-3xl:   1.75rem;
    --cx-fs-4xl:   2.25rem;
  }
}

@media (max-width: 480px) {
  :root {
    --cx-gutter: 14px;
    --cx-sec:    36px;
  }
}