/* ============================================================
   NORDLOHNE DIGITAL — Design Foundations
   tokens.css  (aus dem Claude-Design-System übernommen)
   Primary: #43A3D3 (Nordlohne Cyan)
   ============================================================ */

/* ---- Schriften (lokal gebündelt — Manrope + Plus Jakarta Sans, variable TTFs, OFL) ---- */
@font-face {
  font-family: 'Manrope';
  src: url('../fonts/Manrope-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('../fonts/PlusJakartaSans-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('../fonts/PlusJakartaSans-Italic-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 200 800;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ---- Primary scale (Nordlohne Cyan) ---- */
  --nl-cyan-50:  #ECF7FC;
  --nl-cyan-100: #D2ECF7;
  --nl-cyan-200: #A8DBEF;
  --nl-cyan-300: #76C5E4;
  --nl-cyan-400: #54B0DA;
  --nl-cyan-500: #43A3D3;  /* PRIMARY */
  --nl-cyan-600: #2E86B8;
  --nl-cyan-700: #246B95;
  --nl-cyan-800: #1F5675;
  --nl-cyan-900: #1C4860;
  --nl-cyan-950: #112E3D;

  /* ---- Secondary / gradient partner (Azure Blue) ---- */
  --nl-blue-100: #DCE8FA;
  --nl-blue-300: #9CC0F0;
  --nl-blue-500: #2E72CE;  /* SECONDARY */
  --nl-blue-600: #2059B0;
  --nl-blue-700: #1C478A;

  /* ---- Deep ink (text + dark surfaces) ---- */
  --nl-ink:      #0E2A3B;
  --nl-ink-soft: #1B3A52;

  /* ---- Neutrals (cool gray) ---- */
  --nl-white:    #FFFFFF;
  --nl-gray-50:  #F6F9FB;
  --nl-gray-100: #EDF2F6;
  --nl-gray-200: #DEE6ED;
  --nl-gray-300: #C5D1DA;
  --nl-gray-400: #9AABB7;
  --nl-gray-500: #6E8090;
  --nl-gray-600: #51616E;
  --nl-gray-700: #3B4953;
  --nl-gray-800: #28333B;
  --nl-gray-900: #161E24;

  /* ---- Semantic roles ---- */
  --fg-1: var(--nl-ink);
  --fg-2: var(--nl-gray-600);
  --fg-3: var(--nl-gray-500);
  --fg-on-dark:   #FFFFFF;
  --fg-on-dark-2: #B9CBD8;

  --bg-1: var(--nl-white);
  --bg-2: var(--nl-gray-50);
  --bg-3: var(--nl-gray-100);
  --bg-dark: var(--nl-ink);

  --brand: var(--nl-cyan-500);
  --brand-strong: var(--nl-cyan-600);
  --brand-soft: var(--nl-cyan-50);
  --border-1: var(--nl-gray-200);
  --border-2: var(--nl-gray-300);
  --focus-ring: color-mix(in srgb, var(--nl-cyan-500) 45%, transparent);

  /* ---- Signature gradients ---- */
  --grad-brand: linear-gradient(135deg, #43A3D3 0%, #2E72CE 100%);
  --grad-brand-soft: linear-gradient(135deg, #76C5E4 0%, #9CC0F0 100%);
  --grad-deep: linear-gradient(150deg, #2E86B8 0%, #1B3A6B 60%, #112E3D 100%);

  /* ============================================================
     RADII — verbindliche Projekt-Regeln:
     Bilder / Foto- / Video-Frames + Karten: --r-card (20px)
     CTA-Buttons: --r-btn (12px)
     ============================================================ */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-pill: 999px;
  --r-card: var(--r-lg);
  --r-btn: 12px;

  /* ---- Shadows (cool-tinted, soft) ---- */
  --sh-xs: 0 1px 2px rgba(14,42,59,0.06);
  --sh-sm: 0 2px 6px rgba(14,42,59,0.07), 0 1px 2px rgba(14,42,59,0.05);
  --sh-md: 0 6px 18px rgba(14,42,59,0.09), 0 2px 6px rgba(14,42,59,0.05);
  --sh-lg: 0 18px 44px rgba(14,42,59,0.12), 0 6px 14px rgba(14,42,59,0.06);
  --sh-xl: 0 32px 70px rgba(14,42,59,0.16), 0 10px 24px rgba(14,42,59,0.08);
  --sh-brand: 0 12px 30px rgba(67,163,211,0.32);

  /* ---- Spacing (4px base) ---- */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 20px;  --s-6: 24px;  --s-8: 32px;  --s-10: 40px;
  --s-12: 48px; --s-16: 64px; --s-20: 80px; --s-24: 96px;
  --s-32: 128px;

  /* ---- Layout rhythm (einheitlich für alle Sektionen) ---- */
  --container: 1360px;
  --container-narrow: 1240px;
  /* Seitenrand; auf Geräten mit Notch mindestens die Safe-Area (viewport-fit=cover) */
  --pad-x: max(clamp(20px, 4vw, 56px), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
  --sec-pad-t: clamp(80px, 11vh, 136px);
  --sec-pad-b: clamp(88px, 12vh, 148px);

  /* ---- Typography ---- */
  --font-display: 'Manrope', system-ui, sans-serif;
  --font-body: 'Plus Jakarta Sans', system-ui, sans-serif;

  --t-display: 700 clamp(48px, 6vw, 84px)/1.02 var(--font-display);
  --t-h1: 700 clamp(36px, 4vw, 56px)/1.06 var(--font-display);
  --t-h2: 700 clamp(31px, 3.6vw, 50px)/1.1 var(--font-display);
  --t-h3: 600 clamp(22px, 2vw, 28px)/1.18 var(--font-display);
  --t-h4: 600 20px/1.3 var(--font-display);
  --t-lead: 400 clamp(18px, 1.4vw, 21px)/1.55 var(--font-body);
  --t-body: 400 16px/1.6 var(--font-body);
  --t-body-sm: 400 14px/1.55 var(--font-body);
  --t-caption: 500 13px/1.4 var(--font-body);
  --t-overline: 600 12px/1.2 var(--font-body);
}

/* Gradient text helper */
.nl-grad-text {
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}