/**
 * CSS Custom Properties für InovaTech Website — „Studio Light"
 * Zentrale Design-Tokens — Corporate Identity abgeleitet aus der Wortmarke
 * (Logo-Schwarz #020203 + Logo-Rot #C1292E).
 * Helles Grunddesign; Video-/Canvas-Szenen laufen in dunklen Panels (--panel-*).
 */

:root {
  /* ==================== FARBEN: MARKE ==================== */
  --color-black: #020203;            /* Logo-Schwarz: Text, dunkle Panels */
  --color-red: #C1292E;              /* Logo-Rot, Marken-Akzent */
  --color-red-bright: #E63946;       /* aufgehelltes Rot: Hover, Glow in Panels */
  --color-red-deep: #8E1F23;         /* Pressed-States, Gradient-Endpunkt */

  /* ==================== FARBEN: HELLE FLÄCHEN ==================== */
  --surface-0: #F5F5F7;              /* Seiten-Hintergrund */
  --surface-1: #FFFFFF;              /* Karten, Formularfelder */
  --surface-2: #EDEDF0;              /* Icon-Kacheln, dezente Flächen */
  --surface-3: #E4E4E8;              /* Hover-Abstufung */

  /* ==================== FARBEN: TEXT (auf Hell) ==================== */
  --text-primary: #020203;
  --text-secondary: #4B4B50;
  --text-tertiary: #86868B;

  /* ==================== DUNKLE PANELS (Video-Bühnen) ==================== */
  --panel-bg: #020203;
  --panel-surface: #121216;
  --panel-text: #F5F5F7;
  --panel-text-secondary: #A1A1A6;
  --panel-border: rgba(255, 255, 255, 0.12);

  /* ==================== LINIEN & RÄNDER ==================== */
  --border-subtle: rgba(2, 2, 3, 0.10);
  --border-strong: rgba(2, 2, 3, 0.20);

  /* ==================== EFFEKTE ==================== */
  --glow-red: 0 0 40px rgba(230, 57, 70, 0.35);           /* in dunklen Panels */
  --glow-red-strong: 0 0 80px rgba(230, 57, 70, 0.50);
  --tint-red: rgba(193, 41, 46, 0.06);                     /* zarter Rot-Hauch auf Hell */
  --tint-red-strong: rgba(193, 41, 46, 0.12);
  --gradient-red: linear-gradient(135deg, #E63946 0%, #C1292E 45%, #8E1F23 100%);
  --gradient-text-red: linear-gradient(100deg, #E63946 0%, #A32328 100%);

  /* ==================== TYPOGRAFIE ==================== */
  --font-display: 'Space Grotesk', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-sans: 'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Font Weights */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* Font Sizes - Responsive Scale */
  --fs-xs: clamp(0.75rem, 1vw, 0.8125rem);
  --fs-sm: clamp(0.875rem, 1.2vw, 1rem);
  --fs-base: clamp(1rem, 1.4vw, 1.125rem);
  --fs-lg: clamp(1.1875rem, 1.8vw, 1.375rem);
  --fs-xl: clamp(1.5rem, 2.2vw, 2rem);
  --fs-2xl: clamp(1.875rem, 2.8vw, 2.75rem);
  --fs-display: clamp(2rem, 5vw, 4rem);        /* H2 Sektions-Headlines */
  --fs-hero: clamp(2.75rem, 7vw, 6rem);        /* H1 */
  --fs-mega: clamp(3rem, 9vw, 8rem);           /* XXL (404, Akzente) */

  /* Line Heights */
  --lh-tight: 1.08;
  --lh-snug: 1.25;
  --lh-normal: 1.5;
  --lh-relaxed: 1.7;

  /* Letter Spacing */
  --ls-display: -0.02em;
  --ls-normal: 0;
  --ls-label: 0.08em;

  /* ==================== ABSTÄNDE ==================== */
  --space-xs: 0.375rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 2.5rem;
  --space-3xl: 3rem;
  --space-4xl: 4rem;
  --space-5xl: 6rem;
  --space-6xl: 8rem;

  /* Sektionsabstände */
  --gap-section: clamp(6rem, 12vw, 10rem);
  --gap-section-compact: clamp(3.5rem, 7vw, 6rem);

  /* ==================== LAYOUT ==================== */
  --container-max: 1200px;
  --container-wide: 1440px;
  --container-narrow: 760px;
  --container-padding: clamp(1.25rem, 4vw, 2rem);
  --header-height: 64px;

  /* Sticky-Szenen: dynamische Viewport-Höhe (Fallback unten via @supports) */
  --scene-vh: 100vh;

  /* ==================== RADIEN ==================== */
  --radius-sm: 0.5rem;
  --radius-md: 0.875rem;
  --radius-lg: 1.25rem;
  --radius-xl: 1.75rem;
  --radius-full: 999px;

  /* ==================== SCHATTEN (hell, weich) ==================== */
  --shadow-md: 0 8px 24px rgba(2, 2, 3, 0.08);
  --shadow-lg: 0 20px 48px rgba(2, 2, 3, 0.12);
  --shadow-card: 0 1px 2px rgba(2, 2, 3, 0.04), 0 12px 32px rgba(2, 2, 3, 0.07);

  /* ==================== MOTION ==================== */
  --duration-fast: 200ms;
  --duration-base: 400ms;
  --duration-slow: 800ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-apple: cubic-bezier(0.28, 0.11, 0.32, 1);

  /* ==================== Z-INDEX ==================== */
  --z-below: -1;
  --z-base: 1;
  --z-overlay: 10;
  --z-header: 100;
  --z-mobile-menu: 90;
}

/* Dynamische Viewport-Höhe für Sticky-Szenen (mobile Adressleiste) */
@supports (height: 100svh) {
  :root {
    --scene-vh: 100svh;
  }
}