@import "tailwindcss";

/**
 * Frutiger Aero Design System
 * Design tokens and base styles for Tailwind CSS
 */

/* ===== BASE ===== */
body {
  margin: 0;
  min-height: 100vh;
  background: url('/src/assets/background.avif') center center / cover no-repeat fixed;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ===== DESIGN TOKENS ===== */
:root {
  /* Colors */
  --color-primary: hsl(195, 100%, 50%);
  --color-primary-light: hsl(195, 90%, 65%);
  --color-primary-dark: hsl(200, 70%, 35%);
  --color-success: hsl(140, 75%, 50%);
  --color-error: hsl(355, 85%, 60%);

  /* Gradients */
  --gradient-header: linear-gradient(135deg, hsl(200, 85%, 55%) 0%, hsl(190, 80%, 60%) 50%, hsl(140, 70%, 55%) 100%);
  --gradient-button-blue: linear-gradient(180deg, hsl(200, 90%, 60%) 0%, hsl(200, 85%, 50%) 100%);
  --gradient-button-green: linear-gradient(180deg, hsl(140, 70%, 55%) 0%, hsl(140, 65%, 45%) 100%);
  --gradient-gauge-bezel: linear-gradient(135deg, hsl(200, 20%, 75%) 0%, hsl(200, 15%, 85%) 50%, hsl(200, 20%, 75%) 100%);
  --gradient-gauge-face: radial-gradient(circle at 50% 40%, hsl(190, 70%, 85%) 0%, hsl(195, 65%, 75%) 30%, hsl(200, 60%, 65%) 100%);
  --gradient-instrument-active: linear-gradient(135deg, hsl(50, 90%, 60%) 0%, hsl(45, 85%, 55%) 100%);

  /* Animations */
  --transition-base: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ===== ANIMATIONS ===== */
@keyframes pulse {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.6;
  }
}

@keyframes glow {

  0%,
  100% {
    box-shadow: 0 0 20px hsla(140, 80%, 50%, 0.6), 0 0 40px hsla(140, 80%, 50%, 0.3);
  }

  50% {
    box-shadow: 0 0 30px hsla(140, 80%, 50%, 0.8), 0 0 60px hsla(140, 80%, 50%, 0.4);
  }
}