/*
 * ════════════════════════════════════════════════════════════════════
 *  AKQUIX CRM — Design Tokens v2.0
 *  Single Source of Truth — alle Variablen zentral hier definiert.
 *
 *  Importreihenfolge:
 *    1. tokens.css         ← dieses File
 *    2. layout.css
 *    3. components.css
 *    4. crm-contact.css
 *    5. responsive.css
 *
 *  Konventionen:
 *    --brand-*    Markenfarben
 *    --bg / --surface-*  Hintergrundflächen
 *    --border-*   Rahmenfarben
 *    --text / --t-*  Textfarben (t2–t5 = abgestuft)
 *    --c-*-bg/bd/tx  Funktionale Farb-Triples
 *    --r-*        Radius-Skala
 *    --sh-*       Schatten-Skala
 *    --sp-*       Spacing-Skala (fluid, clamp-basiert)
 *    --fs-*       Typografie-Skala (fluid, clamp-basiert)
 *    --z-*        Z-Index-Skala
 *    --t / --t-*  Transition-Presets
 *    --layout-*   Layout-Chrome-Maße
 * ════════════════════════════════════════════════════════════════════
 */

:root {

  /* ── Brand ── */
  --brand:          #4f63e7;
  --brand-hover:    #4257d9;
  --brand-light:    #6d7ff0;
  --brand-dim:      rgba(79, 99, 231, 0.08);
  --brand-ring:     rgba(79, 99, 231, 0.15);
  --brand2:         #6d4fc0;
  --brand-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

  /* ── Surfaces ── */
  --bg:       #f2f4f8;
  --surface:  #ffffff;
  --surface2: #f8f9fc;
  --surface3: #f4f6fa;
  --surface4: #eef0f6;

  /* ── Borders ── */
  --border:  #e2e6ef;
  --border2: #eaecf4;
  --border3: #f0f2f8;

  /* ── Text Scale ── */
  --text:  #111827;
  --t2:    #374151;
  --t3:    #6b7280;
  --t4:    #9ca3af;
  --t5:    #d1d5db;

  /* Aliases for design-system.css ax- utility classes */
  --text2: var(--t2);
  --text3: var(--t3);
  --text4: var(--t4);
  --text5: var(--t5);

  /* ── Functional Color Triples (bg / border / text) ── */
  --c-blue-bg:   #eff6ff;  --c-blue-bd:   #bfdbfe;  --c-blue-tx:   #1d4ed8;
  --c-violet-bg: #f5f3ff;  --c-violet-bd: #ddd6fe;  --c-violet-tx: #5b21b6;
  --c-amber-bg:  #fffbeb;  --c-amber-bd:  #fde68a;  --c-amber-tx:  #92400e;
  --c-green-bg:  #f0fdf4;  --c-green-bd:  #bbf7d0;  --c-green-tx:  #065f46;
  --c-red-bg:    #fff1f2;  --c-red-bd:    #fecaca;  --c-red-tx:    #b91c1c;
  --c-pink-bg:   #fdf2f8;  --c-pink-bd:   #fbcfe8;  --c-pink-tx:   #be185d;
  --c-orange-bg: #fff7ed;  --c-orange-bd: #fed7aa;  --c-orange-tx: #c2410c;
  --c-slate-bg:  #f8fafc;  --c-slate-bd:  #e2e8f0;  --c-slate-tx:  #475569;
  --c-emerald:   #059669;

  /* ── Radius Scale ── */
  --r-xs:   4px;
  --r-sm:   6px;
  --r:      10px;
  --r-md:   12px;
  --r-lg:   16px;
  --r-xl:   20px;
  --r-full: 9999px;

  /* Legacy aliases (contact-detail.html) */
  --r2: var(--r-md);
  --r3: var(--r-sm);

  /* ── Shadow Scale ── */
  --sh-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
  --sh-sm: 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 4px rgba(0, 0, 0, 0.04);
  --sh:    0 1px 2px rgba(0, 0, 0, 0.04), 0 2px 8px rgba(0, 0, 0, 0.06);
  --sh-md: 0 4px 16px rgba(0, 0, 0, 0.09), 0 1px 4px rgba(0, 0, 0, 0.05);
  --sh-lg: 0 10px 40px rgba(0, 0, 0, 0.14), 0 4px 16px rgba(0, 0, 0, 0.08);
  --sh-xl: 0 20px 60px rgba(0, 0, 0, 0.20), 0 8px 24px rgba(0, 0, 0, 0.10);

  /* Legacy shadow aliases */
  --sh2: var(--sh-md);
  --sh3: var(--sh-xs);

  /* ── Transition Presets ── */
  --t:         all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --t-fast:    all 0.10s ease;
  --t-slow:    all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --t-sidebar: width 0.22s cubic-bezier(0.4, 0, 0.2, 1),
               padding 0.22s cubic-bezier(0.4, 0, 0.2, 1),
               opacity 0.18s ease;

  /* ── Fluid Typography Scale ── */
  --fs-xs:   clamp(10px,  0.70vw, 11px);
  --fs-sm:   clamp(11px,  0.80vw, 12px);
  --fs-base: clamp(12.5px,0.90vw, 14px);
  --fs-md:   clamp(14px,  1.05vw, 15px);
  --fs-lg:   clamp(15px,  1.20vw, 17px);
  --fs-xl:   clamp(18px,  1.50vw, 22px);
  --fs-2xl:  clamp(22px,  1.80vw, 28px);
  --fs-3xl:  clamp(28px,  2.50vw, 36px);
  --fs-4xl:  clamp(34px,  3.00vw, 48px);

  /* ── Fluid Spacing Scale ── */
  --sp-1:  clamp(3px,   0.25vw, 4px);
  --sp-2:  clamp(6px,   0.50vw, 8px);
  --sp-3:  clamp(10px,  0.75vw, 12px);
  --sp-4:  clamp(13px,  1.00vw, 16px);
  --sp-5:  clamp(17px,  1.35vw, 20px);
  --sp-6:  clamp(21px,  1.65vw, 24px);
  --sp-8:  clamp(27px,  2.10vw, 32px);
  --sp-10: clamp(35px,  2.70vw, 40px);
  --sp-12: clamp(44px,  3.40vw, 48px);

  /* ── Layout Chrome ── */
  --topbar-h:            54px;
  --topbar:              54px;    /* legacy alias */
  --actionbar-h:         46px;
  --actionbar:           46px;   /* legacy alias */
  --sidebar-w:           260px;
  --sidebar-collapsed-w: 56px;
  --admin-sidebar-w:     220px;
  --header-h:            56px;

  /* ── Container Widths ── */
  --c-sm:  680px;
  --c-md:  900px;
  --c-doc: 920px;
  --c-lg:  1240px;
  --c-xl:  1500px;
  --c-max: 1800px;
  --c-pad: clamp(16px, 2.5vw, 40px);

  /* ── Z-Index Stack ── */
  --z-base:     1;
  --z-sticky:   10;
  --z-dropdown: 100;
  --z-sidebar:  300;
  --z-overlay:  400;
  --z-modal:    500;
  --z-toast:    600;
  --z-tooltip:  700;
}