/* =========================================================
   SAUBERWERK CHEMNITZ — Design Tokens
   "Sauberkeit mit System"
   ========================================================= */

:root {
  /* ---- Color: Brand ---- */
  --color-navy: #0F2A3D;        /* Primary Navy */
  --color-deep-navy: #071923;   /* Deep Navy — dark premium sections */
  --color-turquoise: #1FBFC2;   /* Fresh Turquoise — primary action */
  --color-turquoise-600: #169C9F;
  --color-turquoise-050: #E6F8F8;
  --color-gold: #D8B46A;        /* Premium Sand / Gold — accent only */
  --color-gold-600: #C29F52;
  --color-gold-050: #F6EFDE;

  /* ---- Color: Neutral ---- */
  --color-white: #FFFFFF;
  --color-offwhite: #F7F9FA;
  --color-surface: #EEF3F5;     /* Soft surface */
  --color-anthracite: #1F2933;
  --color-text: #142430;        /* Body text on light */
  --color-muted: #6B7280;       /* Muted text */
  --color-line: #E5E7EB;        /* Borders / hairlines */
  --color-line-strong: #D3DBE0;

  /* ---- Color: Functional ---- */
  --color-whatsapp: #25D366;
  --color-whatsapp-700: #1FB458;
  --color-success: #1F8A5B;
  --color-success-bg: #E7F4ED;
  --color-error: #C2453B;
  --color-error-bg: #FBEDEC;

  /* ---- Color: on-dark helpers ---- */
  --on-dark: #EAF1F4;
  --on-dark-muted: #9DB2BD;
  --on-dark-line: rgba(255,255,255,0.12);

  /* ---- Typography ---- */
  --font-sans: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --fs-h1-d: clamp(2.35rem, 1.45rem + 3.2vw, 4.6rem);   /* mobile tighter, desktop premium */
  --fs-h1-m: clamp(2.05rem, 1.35rem + 2.5vw, 2.5rem);
  --fs-h2: clamp(1.78rem, 1.22rem + 2vw, 3rem);          /* mobile tighter */
  --fs-h3: clamp(1.3rem, 1.05rem + 0.9vw, 1.6rem);     /* ~21–26px */
  --fs-lead: clamp(1.02rem, 0.98rem + 0.35vw, 1.32rem);
  --fs-body: 1rem;          /* 16px */
  --fs-small: 0.875rem;     /* 14px */
  --fs-xs: 0.78rem;         /* ~12.5px */
  --fs-button: 1rem;

  --lh-tight: 1.04;
  --lh-snug: 1.18;
  --lh-body: 1.62;

  --ls-tight: -0.022em;
  --ls-wide: 0.14em;        /* eyebrows / trust badges */

  /* ---- Spacing ---- */
  --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;

  --section-pad-d: clamp(5rem, 3rem + 6vw, 8.5rem);
  --section-pad-m: 3.75rem;
  --card-pad: clamp(1.4rem, 1.1rem + 1vw, 2rem);
  --grid-gap: clamp(1rem, 0.6rem + 1.4vw, 1.75rem);
  --form-gap: 18px;
  --container: 1200px;
  --container-narrow: 880px;

  /* ---- Radius ---- */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 26px;
  --radius-card: 20px;
  --radius-pill: 999px;

  /* ---- Shadows ---- */
  --shadow-soft: 0 1px 2px rgba(15,42,61,0.04), 0 4px 14px rgba(15,42,61,0.05);
  --shadow-card: 0 2px 4px rgba(15,42,61,0.04), 0 10px 30px rgba(15,42,61,0.07);
  --shadow-card-hover: 0 6px 16px rgba(15,42,61,0.08), 0 22px 50px rgba(15,42,61,0.13);
  --shadow-floating: 0 10px 28px rgba(7,25,35,0.22), 0 4px 10px rgba(7,25,35,0.14);
  --shadow-focus: 0 0 0 4px rgba(31,191,194,0.28);

  /* ---- Motion ---- */
  --duration-fast: 150ms;
  --duration-normal: 220ms;
  --duration-slow: 420ms;
  --ease-standard: cubic-bezier(0.4, 0.0, 0.2, 1);
  --ease-emphasized: cubic-bezier(0.2, 0.7, 0.2, 1);

  /* ---- Layout helpers ---- */
  --header-h: 76px;
}