/* ============================================================
   JCI Sense-See · Design Tokens
   Quelle: JCI Brand Guidelines 2026 + Visuelle Richtung Phase 1
   ============================================================ */

:root {
  /* --- Markenfarben (verbindlich) --- */
  --c-blue:   #0097D7;
  --c-black:  #130F2D;
  --c-white:  #FFFFFF;
  --c-navy:   #1F4789;
  --c-yellow: #EFC40F;
  --c-teal:   #57BCBC;

  /* --- Light Mode Semantik --- */
  --bg:           #FBFBFD;
  --bg-elev:      #FFFFFF;
  --bg-soft:      #F2F4F8;
  --bg-inverted:  #130F2D;

  --fg:           #130F2D;
  --fg-muted:     #4B5063;
  --fg-faint:     #8A8FA3;
  --fg-on-dark:   #F4F4F8;

  --line:         rgba(19, 15, 45, 0.08);
  --line-strong:  rgba(19, 15, 45, 0.16);

  --accent:       #0097D7;
  --accent-soft:  rgba(0, 151, 215, 0.12);
  --accent-deep:  #1F4789;

  --focus-ring:   0 0 0 3px rgba(0, 151, 215, 0.45);

  /* --- Schatten --- */
  --shadow-sm: 0 1px 2px rgba(19,15,45,.04), 0 1px 1px rgba(19,15,45,.04);
  --shadow-md: 0 10px 30px rgba(19,15,45,.08), 0 2px 6px rgba(19,15,45,.06);
  --shadow-lg: 0 30px 80px rgba(19,15,45,.14), 0 6px 18px rgba(19,15,45,.08);

  /* --- Radien --- */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-pill: 999px;

  /* --- Spacing-Skala --- */
  --space-0: 0;
  --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;
  --space-11: 160px;

  /* --- Container --- */
  --container-xs: 640px;
  --container-sm: 880px;
  --container-md: 1120px;
  --container-lg: 1400px;
  --container-xl: 1600px;
  --gutter: clamp(20px, 4vw, 40px);

  /* --- Typografie --- */
  --font-sans: "Plus Jakarta Sans", "Readex Pro", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Arvo", Georgia, "Times New Roman", serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;

  --fs-eyebrow:  12px;
  --fs-meta:     13px;
  --fs-body:     16px;
  --fs-lead:     clamp(17px, 1.4vw, 20px);
  --fs-subhead:  20px;
  --fs-subtitle: clamp(20px, 1.8vw, 24px);
  --fs-quote:    clamp(20px, 2.1vw, 26px);
  --fs-h3:       clamp(24px, 2.6vw, 32px);
  --fs-h2:       clamp(28px, 3.2vw, 44px);
  --fs-h1:       clamp(40px, 6.4vw, 84px);

  --lh-tight:    1.04;
  --lh-snug:     1.2;
  --lh-normal:   1.4;
  --lh-relaxed:  1.6;
  --lh-loose:    1.8;

  --tracking-tight: -0.025em;
  --tracking-snug:  -0.015em;
  --tracking-normal: 0em;
  --tracking-wide:  0.04em;
  --tracking-uppercase: 0.16em;

  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-black: 800;

  /* --- Motion --- */
  --ease-out:  cubic-bezier(.2, .7, .2, 1);
  --ease-soft: cubic-bezier(.4, .0, .2, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);

  --t-fast: 180ms;
  --t-med:  360ms;
  --t-slow: 640ms;
  --t-xslow: 960ms;

  /* --- Layer --- */
  --z-base:    1;
  --z-elev:    10;
  --z-sticky:  50;
  --z-nav:     80;
  --z-modal:   100;
  --z-toast:   120;

  /* --- Breakpoints (als CSS Custom Properties zur Doku, in Media Queries verwendet) --- */
  --bp-sm: 540px;
  --bp-md: 720px;
  --bp-lg: 900px;
  --bp-xl: 1200px;
  --bp-2xl: 1440px;
}