/* ============================================================
   GEORG RECRUITING – DESIGN TOKENS
   Quelle: Webflow-CI (Marke Blau #0062f4, Inter).
   Bewusst kompatibel zu CarePulz & Healthcare Recruiting Summit.
   Farben als RGB-Kanäle → rgb(var(--token) / <alpha>) für Glas/Transparenz.
   ============================================================ */

:root {
  /* ---- Marke (Blau-Skala) ---- */
  --brand-25:  243 247 255;   /* #f3f7ff */
  --brand-50:  230 239 254;   /* #e6effe */
  --brand-100: 204 224 253;   /* #cce0fd */
  --brand-200: 179 208 252;   /* #b3d0fc */
  --brand-300: 153 192 251;   /* #99c0fb */
  --brand-400: 102 161 248;   /* #66a1f8 */
  --brand-500: 51 129 246;    /* #3381f6 */
  --brand-600: 0 98 244;      /* #0062f4  ← Primär */
  --brand-700: 0 59 146;      /* #003b92  ← Hover/Dunkel */
  --brand-800: 0 39 98;       /* #002762 */
  --brand-900: 0 29 73;       /* #001d49 */
  --brand-950: 0 21 51;       /* #001533 */

  /* ---- Akzent-Gradient (Hellblau) ---- */
  --accent-light: 124 203 255;   /* #7ccbff */
  --accent-mid:   64 179 255;    /* #40b3ff */

  /* ---- Neutrale (Grau-Skala) ---- */
  --gray-25:  253 253 253;
  --gray-50:  250 250 250;
  --gray-100: 245 245 245;
  --gray-200: 233 234 235;
  --gray-300: 213 215 218;
  --gray-400: 164 167 174;
  --gray-500: 113 118 128;
  --gray-600: 83 88 98;
  --gray-700: 65 70 81;
  --gray-800: 37 43 55;
  --gray-900: 24 29 39;     /* #181d27 */
  --gray-950: 11 18 32;     /* #0b1220  – dunkle Basis */

  --white: 255 255 255;
  --black: 0 0 0;

  /* ---- Semantische Rollen ---- */
  --color-primary:        var(--brand-600);
  --color-primary-hover:  var(--brand-700);
  --color-ink:            var(--gray-950);   /* Fließtext-Dunkel */
  --color-heading:        var(--brand-950);
  --color-muted:          var(--gray-500);
  --color-line:           var(--gray-200);
  --color-bg:             var(--white);
  --color-bg-soft:        var(--gray-50);
  --color-bg-dark:        var(--brand-950);

  /* ---- Typografie ---- */
  --font-primary: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

  /* Fluid Type-Scale (clamp: mobil → desktop) */
  --fs-display: clamp(2.5rem, 1.4rem + 4.6vw, 4.5rem);
  --fs-h1:      clamp(2rem, 1.3rem + 3vw, 3.25rem);
  --fs-h2:      clamp(1.6rem, 1.15rem + 1.9vw, 2.5rem);
  --fs-h3:      clamp(1.25rem, 1.05rem + 0.9vw, 1.625rem);
  --fs-lead:    clamp(1.05rem, 0.98rem + 0.4vw, 1.25rem);
  --fs-body:    1rem;
  --fs-small:   0.875rem;
  --fs-eyebrow: 0.8125rem;

  --lh-tight: 1.08;
  --lh-snug: 1.25;
  --lh-normal: 1.6;

  /* ---- Spacing-Skala ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;
  --section-y: clamp(4rem, 2.5rem + 6vw, 7.5rem);

  /* ---- Radien ---- */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-xl: 32px;
  --radius-pill: 999px;

  /* ---- Schatten ---- */
  --shadow-xs: 0 1px 2px rgb(var(--brand-950) / 0.06);
  --shadow-sm: 0 2px 8px rgb(var(--brand-950) / 0.06);
  --shadow-md: 0 12px 30px -10px rgb(var(--brand-900) / 0.18);
  --shadow-lg: 0 30px 60px -18px rgb(var(--brand-900) / 0.28);
  --shadow-brand: 0 18px 40px -12px rgb(var(--brand-600) / 0.45);

  /* ---- Glas (Liquid Glass, wie CarePulz) ---- */
  --glass-bg: rgb(var(--white) / 0.7);
  --glass-bg-dark: rgb(var(--white) / 0.06);
  --glass-border: rgb(var(--white) / 0.55);
  --glass-border-dark: rgb(var(--white) / 0.12);
  --glass-blur: 18px;

  /* ---- Verläufe ---- */
  --gradient-brand: linear-gradient(135deg, rgb(var(--brand-600)) 0%, rgb(var(--brand-800)) 100%);
  --gradient-accent: linear-gradient(120deg, rgb(var(--accent-light)) 0%, rgb(var(--accent-mid)) 45%, rgb(var(--brand-600)) 100%);
  --gradient-hero: radial-gradient(120% 120% at 80% -10%, rgb(var(--brand-700) / 0.9) 0%, rgb(var(--brand-950)) 55%);
  --gradient-text: linear-gradient(100deg, #aee3ff 0%, #46b4ff 48%, #0a84ff 100%);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 0.18s;
  --dur: 0.32s;
  --dur-slow: 0.6s;

  /* ---- Layout ---- */
  --container: 1200px;
  --container-narrow: 820px;
  --header-h: 76px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}