/* ================================
   DESIGN TOKENS (CSS Custom Properties)
   Extracted from Zeitgeist Cloud
   
   CRITICAL: This file must load FIRST before all other CSS files.
   All other stylesheets reference these variables.
   ================================ */

:root {
  /* === Colors === */
  --page-bg: #A0DEFF;
  --ink: #1F2937;
  --brand: #17153B;
  --accent: #2DA44E;
  --accent-hover: #3CAD07;
  --white: #FFFFFF;
  --light-text: #B6EAFA;
  --hero-text: #FFFFE0;

  /* Summon hover (used for borders) */
  --summon-hover: #9195F6;

  /* === Layout === */
  --radius: clamp(6px, 1vmin, 12px);
  --shadow: 0 0 clamp(4px, 1vmin, 12px) rgba(0,0,0,.3);
  
  /* === Typography Scale (vmin-based) === */
  --text-xs: clamp(0.7rem, 1.8vmin, 1rem);
  --text-sm: clamp(0.8rem, 2.2vmin, 1.2rem);
  --text-base: clamp(1rem, 2.8vmin, 1.6rem);
  --text-lg: clamp(1.2rem, 3.4vmin, 2rem);
  --text-xl: clamp(1.4rem, 4vmin, 2.4rem);
  --text-hero: clamp(0.68rem, 4.3vmin, 3rem);

  /* === Spacing Scale (vmin-based) === */
  --space-xxxs: clamp(0.05rem, 0.3vmin, 0.15rem);
  --space-xxs: clamp(0.1rem, 0.5vmin, 0.25rem);
  --space-xs: clamp(0.25rem, 1vmin, 0.5rem);
  --space-sm: clamp(0.5rem, 1.5vmin, 1rem);
  --space-md: clamp(1rem, 2.5vmin, 2rem);
  --space-lg: clamp(1.5rem, 4vmin, 3rem);
  --space-xl: clamp(2rem, 6vmin, 4rem);

  /* === Hero-Specific Spacing (vh-responsive for vertical control) === */
  --hero-text-gap: clamp(0.1rem, 1vmin, 1rem);
  --hero-element-gap: clamp(0.05rem, 0.5vmin, 0.5rem);
  --hero-content-padding: clamp(0.2rem, 1.5vmin, 2rem);
  --hero-button-gap: clamp(0.1rem, 1vmin, 1rem);
  --hero-image-gap: clamp(0.1rem, 1.2vmin, 1.5rem);

  /* === Hero Line Heights (Responsive) === */
  --hero-line-height: clamp(1.1, calc(0.4vmin + 1.1), 1.4);
  --hero-line-height-tight: clamp(1.2, calc(0.4vmin + 1.15), 1.8);

  /* === Responsive Channel (simplified) === */
  --content-width: clamp(300px, 94vw, 60rem);
  --narrow-width: clamp(280px, 90vw, 24rem);
  --hero-width: clamp(400px, 95vw, 80rem);

  /* === Layout Heights === */
  --header-height: clamp(60px, 10vmin, 120px);
  --cloud-height: clamp(380px, 65vmin, 75vh);
  --footer-height: clamp(80px, 12vmin, 150px);

  /* Cloud zone multiplier: total zone height vs. cloud SVG height */
  --cloud-zone-multiplier: 1.4;

  /* === Interactive Elements - Enhanced Sizing System === */
  --button-padding-y: clamp(0.6rem, 1.5vmin, 1.2rem);
  --button-padding-x: clamp(1rem, 2.5vmin, 2rem);
  --input-padding: clamp(0.5rem, 1.2vmin, 1rem);

  /* Interactive Element Sizing */
  --primary-button-height: clamp(52px, 8vmin, 72px);
  --primary-button-padding-x: clamp(2rem, 5vmin, 4rem);
  --primary-button-font: clamp(1rem, 2.2vmin, 1.3rem);
  --secondary-button-height: clamp(48px, 7vmin, 64px);
  --secondary-button-padding-x: clamp(1.5rem, 4vmin, 3rem);
  --secondary-button-font: clamp(1rem, 3.2vmin, 1.5rem);
  --input-height: clamp(48px, 7vmin, 64px);
  --input-padding-x: clamp(1rem, 3vmin, 2rem);
  --input-font: clamp(1rem, 3.2vmin, 1.5rem);
  --element-radius: clamp(8px, 1.5vmin, 16px);
  --element-gap: clamp(1rem, 3vmin, 2rem);

  /* Footer-specific text */
  --footer-text-size: clamp(0.5rem, 3.2vw, 1.25rem);
  
  /* Header-specific text */
  --header-h1-size: clamp(1.1rem, 4vw, 2.3rem);
  --header-h2-size: clamp(0.9rem, 2.8vw, 1.2rem);
}