/* ============================================================
   KLERA IP — Design Tokens
   "Engineering / Dark" — Tech-Firmen-Auftritt.
   Dunkel, klare Sans, Mono-Akzente, ein leuchtender Petrol-Ton.
   Bewusst KEINE Serifen, KEIN warmes Beige (≠ Heinze).
   Single Source of Truth — niemals Hex-Werte hardcoden.
   ============================================================ */

/* --- Schriften lokal (DSGVO-konform, kein Google CDN) --- */
@import url('fonts.css');

:root {
  /* ---- Palette (dark-first) ---- */
  --color-base:        #0B0F0E;   /* Tiefes Petrol-Schwarz — Seitenhintergrund */
  --color-surface:     #121817;   /* Cards, Panels */
  --color-surface-2:   #18201E;   /* Elevated / Hover */
  --color-paper:       #1C2523;   /* Inputs, hellste Fläche */
  --color-hairline:    rgba(236, 241, 239, 0.10); /* Subtile Linien auf Dunkel */
  --color-hairline-strong: rgba(236, 241, 239, 0.18);

  --color-text-primary:   #ECF1EF; /* Off-white */
  --color-text-secondary: #9BA8A4; /* Gedämpft */
  --color-text-muted:     #687471; /* Labels, Captions */
  --color-text-invert:    #0B0F0E; /* Text auf hellem/Akzent-Grund */

  /* Klera-Signatur: leuchtendes Petrol/Mint auf Dunkel */
  --color-accent:       #38D9C4;   /* Mint-Petrol — Akzente, Links, CTA */
  --color-accent-deep:  #21B6A3;   /* Tiefer — Hover */
  --color-accent-soft:  #6FE6D7;   /* Heller — Highlights */
  --color-accent-wash:  rgba(56, 217, 196, 0.10); /* Sehr dezente Akzentfläche */

  /* ---- Typografie ---- */
  --font-display: 'Space Grotesk', system-ui, sans-serif; /* H1, H2 */
  --font-body:    'Inter', system-ui, sans-serif;         /* Fließtext, Nav */
  --font-mono:    'JetBrains Mono', ui-monospace, monospace; /* Eyebrows, Badges */

  --font-size-xs:   0.75rem;
  --font-size-sm:   0.875rem;
  --font-size-base: 1rem;
  --font-size-md:   1.125rem;
  --font-size-lg:   1.25rem;
  --font-size-xl:   1.5rem;
  --font-size-2xl:  2rem;
  --font-size-3xl:  2.75rem;
  --font-size-4xl:  3.75rem;
  --font-size-hero: clamp(2.5rem, 6.5vw, 5rem);

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

  --line-height-tight:   1.08;
  --line-height-snug:    1.3;
  --line-height-normal:  1.6;
  --line-height-relaxed: 1.75;

  --letter-spacing-tight: -0.03em;
  --letter-spacing-wide:  0.06em;
  --letter-spacing-wider: 0.18em;

  /* ---- Spacing ---- */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* ---- Layout ---- */
  --max-width-text:    680px;
  --max-width-content: 980px;
  --max-width-wide:   1200px;

  /* ---- Radii ---- */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:  14px;
  --radius-xl:  20px;
  --radius-pill: 999px;

  /* ---- Shadows ---- */
  --shadow-card: 0 1px 0 0 rgba(236,241,239,0.04) inset,
                 0 8px 24px 0 rgba(0, 0, 0, 0.35);
  --shadow-elevated: 0 16px 48px 0 rgba(0, 0, 0, 0.5);

  /* ---- Transitions ---- */
  --transition-fast:   150ms ease;
  --transition-normal: 250ms ease;
  --transition-slow:   400ms ease;
}