/* ==========================================================================
   ECHO Website: Design Tokens
   Every color and timing value here is taken directly from echo-free.html /
   echo-full.html, not approximated. This is the one file to edit if the
   game's own visual language ever changes.
   ========================================================================== */

   :root {
      /* ---- Palette, confirmed from the shipped game's CSS/canvas fills ---- */
      --bg:          #f0ede8;  /* warm off-white background */
      --navy:        #1e293b;  /* structure / obstacles / text */
      --navy-2:      #334155;  /* wall edge highlight */
      --slate-1:     #64748b;  /* secondary text */
      --slate-2:     #94a3b8;  /* tertiary / muted text */
      --slate-3:     #cbd5e1;  /* trim lines */
      --orange:      #f97316;  /* the player */
      --teal:        #14b8a6;  /* the Echo */
      --teal-dark:   #0d9488;
      --pink:        #ec4899;  /* gates, closed */
      --pink-dark:   #be185d;
      --amber:       #fbbf24;  /* contact / feedback */
      --amber-2:     #f59e0b;
      --green:       #16a34a;  /* used sparingly, finish-line reference only */
    
      /* ---- Typography ---- */
      --font-mono: 'Space Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
    
      /* ---- Timing: deliberately reusing the game's own numbers.
         The Echo delay is 900ms and the gate crossfade is 400ms in the actual
         game code. Reusing those exact figures (not round numbers invented for
         the website) is what makes the site's pacing feel like it belongs to
         ECHO rather than a generic transition speed. ---- */
      --duration-anticipation: 900ms;  /* mirrors ECHO_DELAY_MS */
      --duration-gate: 400ms;          /* mirrors GATE_ANIM_MS */
      --duration-quick: 150ms;
      --duration-fade: 600ms;
      --ease-echo: cubic-bezier(0.22, 0.61, 0.36, 1);
    
      /* ---- Spacing scale ---- */
      --space-1: 8px;
      --space-2: 16px;
      --space-3: 24px;
      --space-4: 40px;
      --space-5: 64px;
      --space-6: 88px;
      --space-7: 112px;
    
      /* ---- Radii ---- */
      --radius-sm: 6px;
      --radius-md: 14px;
    
      /* ---- Layout ---- */
      --max-width: 720px;
      --max-width-wide: 960px;
    }