/* ============================================================
   DESIGN TOKENS
   CSS custom properties for the Weatherballoon design system.
   ============================================================ */

:root {
  /* ---- Brand colours ---- */
  --color-primary:     #FF6B35;
  --color-primary-end: #FFD93D;
  --color-accent:      #4ECDC4;
  --color-purple:      #4b3fa0;

  /* ---- Semantic colours ---- */
  --color-dark:        #1a1a2e;
  --color-surface:     #f4f6fb;
  --color-white:       #fff;
  --color-gray-300:    #d1d5db;
  --color-gray-400:    #9ca3af;
  --color-gray-500:    #6b7280;
  --color-error:       #dc2626;
  --color-error-bg:    #fff0f0;

  /* ---- Instrument colours (thermometer, wind, etc.) ---- */
  --color-cold:        #4D96FF;
  --color-hot:         #FF6B6B;

  /* ---- Gradients ---- */
  --gradient-primary: linear-gradient(135deg, #FF6B35, #FFD93D);
  --gradient-hero:    linear-gradient(135deg, #0d1b6e 0%, #1a3a8f 50%, #4b3fa0 100%);
  --gradient-night:   linear-gradient(185deg, #050d2e 0%, #0d1b6e 18%, #1a3a8f 38%, #2d6abf 56%, #74b3e0 72%, #f7c94b 86%, #f4874b 100%);
  --gradient-thermo:  linear-gradient(180deg, #FF6B6B 0%, #FF6B35 25%, #FFD93D 55%, #74b3e0 80%, #4D96FF 100%);
  --gradient-form:    linear-gradient(180deg, #0b1452 0%, #142680 35%, #2a3aa3 70%, #4b3fa0 100%);

  /* ---- Border radii ---- */
  --radius-sm:   12px;
  --radius-md:   16px;
  --radius-lg:   20px;
  --radius-xl:   24px;
  --radius-2xl:  28px;
  --radius-full: 100px;

  /* ---- Shadows ---- */
  --shadow-card:              0 2px 12px rgba(26,26,46,0.07);
  --shadow-card-hover:        0 8px 24px rgba(26,26,46,0.12);
  --shadow-btn-primary:       0 4px 18px rgba(255,107,53,0.35);
  --shadow-btn-primary-hover: 0 8px 26px rgba(255,107,53,0.5);
  --shadow-btn-secondary:     0 2px 10px rgba(26,26,46,0.1);
  /* Panels floating over an .atmosphere sky */
  --shadow-panel:    0 22px 44px -18px rgba(5,10,50,0.45);
  --shadow-panel-lg: 0 30px 60px -20px rgba(5,10,50,0.55);

  /* ---- Glass: chips and buttons sitting on a dark sky ---- */
  --glass-bg:       rgba(255,255,255,0.12);
  --glass-bg-hover: rgba(255,255,255,0.22);
  --glass-border:   rgba(255,255,255,0.25);

  /* ---- Motion ---- */
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);  /* small controls: springy overshoot */
  --ease-out-soft: cubic-bezier(0.22, 1, 0.36, 1);     /* larger moves: soft decelerate */
  --dur-hover: 150ms;  /* hover lifts stay quick */
  --dur-move:  280ms;  /* larger moves: panels opening, group swaps */

  /* ---- Typography ---- */
  --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
}