/* ==========================================================================
   WICHTEL.ART // VIBE CODING - DESIGN TOKENS
   Strict Monochromatic Grayscale Palette, Fluid Editorial Typography, Glassmorphism
   ========================================================================== */

:root {
  /* Strictly Grayscale HSL Palette (0% Saturation) */
  --c-black: hsl(0, 0%, 3%);
  --c-dark-900: hsl(0, 0%, 6%);
  --c-dark-800: hsl(0, 0%, 10%);
  --c-dark-700: hsl(0, 0%, 15%);
  --c-gray-600: hsl(0, 0%, 25%);
  --c-gray-500: hsl(0, 0%, 40%);
  --c-gray-400: hsl(0, 0%, 60%);
  --c-gray-300: hsl(0, 0%, 75%);
  --c-gray-200: hsl(0, 0%, 88%);
  --c-gray-100: hsl(0, 0%, 95%);
  --c-white: hsl(0, 0%, 100%);

  /* Alpha Overlays */
  --c-scrim-heavy: hsla(0, 0%, 0%, 0.85);
  --c-scrim-medium: hsla(0, 0%, 0%, 0.55);
  --c-scrim-light: hsla(0, 0%, 0%, 0.25);
  --c-glass-bg: hsla(0, 0%, 8%, 0.65);
  --c-glass-border: hsla(0, 0%, 100%, 0.12);
  --c-glass-border-hover: hsla(0, 0%, 100%, 0.35);

  /* Fluid Typography */
  --font-display: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'Space Mono', 'IBM Plex Mono', SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Font Sizes */
  --fs-hero: clamp(2.5rem, 6.5vw, 6.5rem);
  --fs-h2: clamp(1.8rem, 4vw, 3.8rem);
  --fs-h3: clamp(1.3rem, 2.5vw, 2.2rem);
  --fs-body-l: clamp(1.05rem, 1.4vw, 1.25rem);
  --fs-body: clamp(0.9rem, 1.1vw, 1rem);
  --fs-small: clamp(0.75rem, 0.9vw, 0.85rem);
  --fs-mono-micro: clamp(0.65rem, 0.75vw, 0.75rem);

  /* Layout Spacing */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 2rem;
  --space-lg: 3.5rem;
  --space-xl: 6rem;

  /* Cinema 16:9 Frame Dimensions */
  --frame-aspect: 16 / 9;
  --frame-border-radius: 4px;
  --frame-border: 1px solid hsla(0, 0%, 100%, 0.08);

  /* Glassmorphism & Elevation */
  --glass-blur: blur(20px);
  --shadow-elevation: 0 30px 60px rgba(0, 0, 0, 0.8);
  --shadow-subtle: 0 10px 30px rgba(0, 0, 0, 0.4);

  /* Easing */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out-sine: cubic-bezier(0.37, 0, 0.63, 1);
}