/* ============================================================
   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);

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