/* ═══════════════════════════════════════════════════════════════════
   HAEDGE / HEY SOFTWARE — SHARED DESIGN TOKENS
   Einbinden in jede Brand-Site, dann theme.css pro Site drüberlegen.
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Spacing ────────────────────────────────────────────────────── */
:root {
  --space-1:  4px;
  --space-2:  8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10:128px;
}

/* ─── Typography ─────────────────────────────────────────────────── */
:root {
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  --text-xs:   0.75rem;   /* 12px */
  --text-sm:   0.875rem;  /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-lg:   1.125rem;  /* 18px */
  --text-xl:   1.25rem;   /* 20px */
  --text-2xl:  1.5rem;    /* 24px */
  --text-3xl:  1.875rem;  /* 30px */
  --text-4xl:  2.25rem;   /* 36px */
  --text-5xl:  3rem;      /* 48px */
  --text-6xl:  3.75rem;   /* 60px */

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold:600;
  --weight-bold:    700;
  --weight-black:   900;

  --leading-tight:  1.2;
  --leading-snug:   1.375;
  --leading-normal: 1.5;
  --leading-relaxed:1.625;
}

/* ─── Border Radius ──────────────────────────────────────────────── */
:root {
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl:24px;
  --radius-full:9999px;
}

/* ─── Shadows ────────────────────────────────────────────────────── */
:root {
  --shadow-sm:  0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.05);
  --shadow-md:  0 4px 12px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.05);
  --shadow-lg:  0 10px 30px rgba(0,0,0,.10), 0 4px 8px rgba(0,0,0,.06);
  --shadow-xl:  0 20px 50px rgba(0,0,0,.12), 0 8px 16px rgba(0,0,0,.07);
}

/* ─── Transitions ────────────────────────────────────────────────── */
:root {
  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   400ms ease;
}

/* ─── Breakpoints (als Custom Props für JS, in CSS via @media) ───── */
/* sm: 640px | md: 768px | lg: 1024px | xl: 1280px | 2xl: 1536px   */

/* ─── Shared Neutral Palette ─────────────────────────────────────── */
:root {
  --neutral-50:  #F8F9FA;
  --neutral-100: #F1F3F5;
  --neutral-200: #E9ECEF;
  --neutral-300: #DEE2E6;
  --neutral-400: #CED4DA;
  --neutral-500: #ADB5BD;
  --neutral-600: #6C757D;
  --neutral-700: #495057;
  --neutral-800: #343A40;
  --neutral-900: #212529;
  --white: #FFFFFF;
  --black: #0A0A0A;
}

/* ═══════════════════════════════════════════════════════════════════
   BRAND THEMES — per Site überschreiben via theme.css
   Jede Site setzt diese Variablen neu; alle Komponenten nutzen nur
   die semantischen Namen (--color-primary, etc.)

   BESONDERHEIT haedge.consulting — Narratives Farbsystem:
   Die Farben des Logos sind semantisch codiert und bilden das
   Transformations-Narrativ von Haedge Consulting ab:

     #e5484d  ROT   → Ausgangslage: Störungen, Blockaden, Stillstand
     #2ecc71  GRÜN  → Intervention: Klärung, Verbesserung, Wachstum
     #149ffe  BLAU  → Zielzustand: Stabiles, skalierbares Wachstum

   Unbloc_it Sub-Brand verlängert dasselbe Narrativ als Gradient:
     #ff4300 → #fbc02d → #149ffe  (Stillstand → Leistung → Wachstum)

   Konsequenz: --color-accent = #149ffe (Blau = CTA = Zielzustand).
   Vollständige Token-Definitionen: haedge.consulting/theme.css
   ═══════════════════════════════════════════════════════════════════ */

/* Fallback = hey-midwife Theme */
:root {
  --color-primary-900: #0D2E3D;
  --color-primary-800: #15495F;
  --color-primary-700: #1D6580;
  --color-primary-600: #2578A0;
  --color-primary:     #2E86AB;  /* Brand-Hauptfarbe */
  --color-primary-400: #4FA3C8;
  --color-primary-300: #7ABFD9;
  --color-primary-200: #B3D9EB;
  --color-primary-100: #D9EEF5;
  --color-primary-50:  #EBF6FB;

  --color-accent-900:  #5C1A35;
  --color-accent-800:  #8C2850;
  --color-accent-700:  #B83C6A;
  --color-accent:      #E86A92;  /* Brand-Akzentfarbe */
  --color-accent-300:  #F09AB5;
  --color-accent-100:  #FBDDE7;
  --color-accent-50:   #FFF0F5;

  --color-bg:          #FAFCFF;
  --color-surface:     #FFFFFF;
  --color-border:      #E2EDF4;
  --color-text:        #1A3A4A;
  --color-text-muted:  #5E7A8A;
  --color-text-subtle: #8FA8B5;
}