/**
 * ==============================================================================
 * IWQ - CORPORATE IDENTITY & DESIGN TOKENS (REBRANDING NR. 05: CHARCOAL & CORAL)
 * ==============================================================================
 * Offizieller Styleguide für IWQ e.V.
 * 
 * Farbkonzept 05:
 * - Primary (Charcoal): #22252A (Seriosität, Klarheit, Struktur)
 * - Accent (Coral):     #FF6B5A (Energie, Menschlichkeit, Fokus / CTAs)
 * - Neutral / Surface:  #F8F9FA / #FFFFFF (60% Weißraum & Lesbarkeit)
 */

:root {
  /* --- PRIMÄRFARBEN (PRIMARY BRAND COLORS) --- */
  --ci-brand-primary: #22252A;         /* IWQ-Charcoal: Hauptfarbe, Überschriften, Footer */
  --ci-brand-primary-hover: #16181C;
  --ci-brand-primary-dark: #0F1114;

  --ci-brand-accent: #FF6B5A;          /* IWQ-Coral: Akzentfarbe -> CTAs, Punkt im Logo, Highlights */
  --ci-brand-accent-hover: #E55342;    /* Dunkleres Coral für Hover & aktive Zustände */
  --ci-brand-accent-subtle: #FFF0EE;   /* Zartes Soft-Coral für Badges & Boxen */
  --ci-brand-accent-light: #FFD5CF;    /* Helles Coral für Rahmen & dezente Akzente */

  /* --- SEKUNDÄRFARBEN (SECONDARY COLORS) --- */
  --ci-brand-medium-green: #E55342;    /* Legacy-Alias -> Coral Hover */
  --ci-brand-light-green: #FFD5CF;     /* Legacy-Alias -> Coral Light */
  --ci-brand-slate-blue: #4A4F57;      /* Warmes Schiefergrau: Subheadlines, Navigation */

  /* --- UNTERSTÜTZENDE NEUTRALTÖNE (SURFACES & BACKGROUNDS) --- */
  --ci-bg-body: #F8F9FA;               /* Hellgrau: Helle Hintergründe */
  --ci-bg-surface: #FFFFFF;            /* Weiß: Haupthintergrund, Karten */
  --ci-bg-subtle: #F2F3F5;             /* Dezentes Grau: Sektionstrennungen */
  --ci-bg-dark: #22252A;               /* IWQ-Charcoal: Footer & Kontrastflächen */
  --ci-bg-dark-deep: #16181C;          /* Tiefere Nuance für Footer-Abschluss */

  /* --- TYPOGRAFIE FARBEN (TEXT COLORS) --- */
  --ci-text-heading: #22252A;          /* IWQ-Charcoal: Haupttexte, Überschriften */
  --ci-text-body: #3B3F46;             /* Dunkelgrau: Fließtext */
  --ci-text-muted: #6C727D;            /* Mittelgrau: Beschreibungstexte / Metadaten */
  --ci-text-light: #FFFFFF;            /* Weiß: Text auf dunklen Flächen */
  --ci-text-accent: #E55342;           /* Coral: Text-Akzente auf hellem Grund */
  --ci-text-subheadline: #4A4F57;      /* Schiefergrau: Subheadlines */

  /* --- RAHMEN & TRENNLINIEN (BORDERS) --- */
  --ci-border-light: #E2E5E9;          /* Neutralgrau: Trennlinien, Rahmen */
  --ci-border-subtle: #F2F3F5;         /* Feine Kanten */
  --ci-border-focus: #FF6B5A;          /* IWQ-Coral bei Fokus */

  /* --- SPEZIELLE AKZENTFARBEN --- */
  --ci-accent-coral: #FF6B5A;
  --ci-accent-amber: #FFA94D;
  --ci-accent-violet: #845EF7;
  --ci-accent-ocean: #339AF0;

  /* --- TYPOGRAFIE FAMILIE & GRÖSSEN --- */
  --ci-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ci-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* --- GEOMETRIE & ABSTÄNDE (RADII & SHADOWS) --- */
  --ci-radius-sm: 6px;
  --ci-radius-md: 10px;
  --ci-radius-lg: 16px;
  --ci-radius-full: 9999px;

  --ci-shadow-subtle: 0 1px 3px rgba(34, 37, 42, 0.05);
  --ci-shadow-card: 0 4px 14px -2px rgba(34, 37, 42, 0.07), 0 2px 6px -2px rgba(34, 37, 42, 0.04);
  --ci-shadow-elevated: 0 14px 32px -6px rgba(34, 37, 42, 0.12), 0 6px 12px -4px rgba(34, 37, 42, 0.06);

  /* --- LAYOUT CONTAINER --- */
  --ci-container-width: 1180px;
  --ci-container-padding: 1.5rem;
  --ci-transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}