/* =====================================================================
   All IT Consulting — Design Tokens
   Zentrale Design-Variablen für Webseite UND CI-Dokumente.
   url()-Pfade sind relativ zu DIESER Datei (assets/css/), daher
   funktionieren die Schriften auch, wenn Dokumente aus /ci/ verlinken.
   ===================================================================== */

/* ---------- Schriften (selbst gehostet, DSGVO-konform) ---------- */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/inter-400.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/inter-500.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/inter-600.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/inter-700.woff2") format("woff2");
}
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/space-grotesk-500.woff2") format("woff2");
}
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/space-grotesk-700.woff2") format("woff2");
}

:root {
  /* ---------- Markenfarben ---------- */
  --color-ink:        #0A1124; /* tiefes Navy – dunkle Flächen, Text */
  --color-ink-2:      #0F1A33; /* etwas hellere dunkle Fläche */
  --color-ink-3:      #16233f; /* Karten auf Dunkel */
  --color-primary:    #2563EB; /* kräftiges Blau */
  --color-primary-600:#1D4ED8;
  --color-primary-400:#60A5FA;
  --color-accent:     #22D3EE; /* Cyan – Highlights */
  --color-accent-600: #06B6D4;

  /* Signature-Verlauf */
  --brand-gradient:   linear-gradient(135deg, #2563EB 0%, #22D3EE 100%);
  --brand-gradient-soft: linear-gradient(135deg, rgba(37,99,235,.14), rgba(34,211,238,.14));

  /* ---------- Neutraltöne ---------- */
  --color-slate-900:  #0F172A;
  --color-slate-800:  #1E293B;
  --color-slate-700:  #334155;
  --color-slate-600:  #475569;
  --color-slate-500:  #64748B;
  --color-slate-400:  #94A3B8;
  --color-slate-300:  #CBD5E1;
  --color-slate-200:  #E2E8F0;
  --color-slate-100:  #F1F5F9;
  --color-slate-50:   #F8FAFC;
  --color-white:      #FFFFFF;

  /* ---------- Semantische Farben ---------- */
  --color-success:    #10B981;
  --color-warning:    #F59E0B;
  --color-danger:     #EF4444;

  /* ---------- Typografie ---------- */
  --font-display: "Space Grotesk", ui-sans-serif, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-body:    "Inter", ui-sans-serif, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* ---------- Radien ---------- */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 26px;
  --radius-full: 999px;

  /* ---------- Schatten ---------- */
  --shadow-sm: 0 1px 2px rgba(10, 17, 36, .06), 0 1px 3px rgba(10, 17, 36, .10);
  --shadow-md: 0 4px 12px rgba(10, 17, 36, .08), 0 2px 4px rgba(10, 17, 36, .06);
  --shadow-lg: 0 18px 40px rgba(10, 17, 36, .12), 0 6px 14px rgba(10, 17, 36, .08);
  --shadow-glow: 0 20px 60px rgba(37, 99, 235, .35);

  /* ---------- Layout ---------- */
  --container: 1160px;
  --container-narrow: 820px;

  /* ---------- Bewegung ---------- */
  --ease: cubic-bezier(.22, 1, .36, 1);
  --transition: 240ms var(--ease);
}