/* ==========================================================================
   CONPLOT DESIGN TOKENS — Richtung A "Dunkel & Organisch"
   ==========================================================================
   Single source of truth for color, type, spacing and radius. Change a
   value here and it propagates everywhere — never hardcode a hex/px value
   that already has a token below inside component CSS or markup.
   ========================================================================== */

:root {
  /* ---- Color: surfaces ---- */
  --c-bg: #37342E;            /* primary dark background */
  --c-bg-raised: #423E36;     /* cards, raised panels on --c-bg */
  --c-bg-sunken: #2C2A25;     /* hero chrome, footer, recessed panels */
  --c-bg-light: #FAF9F6;      /* light sections (forms, legal pages) */
  --c-bg-light-raised: #F2F0E9;

  /* ---- Color: text ---- */
  --c-text: #F5F1E8;          /* primary text on dark */
  --c-text-muted: #C6BFB1;    /* secondary text on dark */
  --c-text-faint: #8A8377;    /* tertiary / disabled on dark */
  --c-text-on-light: #211E19; /* primary text on light sections */
  --c-text-on-light-muted: #6B6459;

  /* ---- Color: brand accents ---- */
  --c-petrol: #19827D;
  --c-petrol-hover: #1E9A94;
  --c-blue: #94AABD;

  /* ---- Color: structure ---- */
  --c-rule: #57524A;          /* borders/dividers on dark */
  --c-rule-light: #DDD8CC;    /* borders/dividers on light */

  /* ---- Typography ---- */
  --font-sans: 'Poppins', 'Segoe UI', system-ui, sans-serif;

  --fs-hero: clamp(2.25rem, 4.5vw, 4rem);      /* 36–64px */
  --fs-h1: clamp(2rem, 3.4vw, 3rem);           /* 32–48px */
  --fs-h2: clamp(1.5rem, 2.2vw, 2rem);         /* 24–32px */
  --fs-h3: 1.25rem;                             /* 20px */
  --fs-body-lg: 1.125rem;                       /* 18px */
  --fs-body: 1rem;                              /* 16px */
  --fs-small: 0.875rem;                         /* 14px */
  --fs-label: 0.75rem;                          /* 12px, letter-spaced kicker */

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

  --lh-tight: 1.1;
  --lh-normal: 1.5;
  --lh-relaxed: 1.7;

  /* ---- Spacing scale (8px base) ---- */
  --sp-1: 0.5rem;   /* 8 */
  --sp-2: 0.75rem;  /* 12 */
  --sp-3: 1rem;     /* 16 */
  --sp-4: 1.5rem;   /* 24 */
  --sp-5: 2rem;     /* 32 */
  --sp-6: 3rem;     /* 48 */
  --sp-7: 4rem;     /* 64 */
  --sp-8: 6rem;     /* 96 */
  --sp-9: 8rem;     /* 128 */

  /* ---- Radius / shadow ---- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --shadow-card: 0 20px 40px -24px rgba(0,0,0,0.45);

  /* ---- Layout ---- */
  --content-max: 1200px;
  --content-pad: clamp(20px, 4vw, 56px);
  --nav-h: 76px;

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 150ms;
  --dur-normal: 260ms;
}