:root {
  /* =========================================================
     AIRVENOR — Design System
     Professional Aviation / Premium Glass Cockpit
     ========================================================= */

  /* =========================================================
     BRAND COLORS
     ========================================================= */

  --color-primary: #0A2342;
  --color-primary-dark: #061A2D;
  --color-primary-light: #123B68;

  --color-secondary: #0E5CAD;
  --color-secondary-dark: #08447F;
  --color-secondary-light: #2A78C7;

  --color-accent: #1DA1F2;
  --color-accent-light: #55B9F5;

  --color-highlight: #FFD54F;
  --color-highlight-dark: #E6B93D;


  /* =========================================================
     BACKGROUND
     ========================================================= */

  --color-background: #061A2D;
  --color-background-light: #0A2947;
  --color-background-deep: #030F1C;


  /* =========================================================
     SURFACES
     ========================================================= */

  --color-surface: rgba(255, 255, 255, 0.08);
  --color-surface-strong: rgba(255, 255, 255, 0.14);
  --color-surface-light: rgba(255, 255, 255, 0.06);
  --color-surface-hover: rgba(255, 255, 255, 0.12);


  /* =========================================================
     BORDERS
     ========================================================= */

  --color-border: rgba(255, 255, 255, 0.12);
  --color-border-light: rgba(255, 255, 255, 0.08);
  --color-border-strong: rgba(255, 255, 255, 0.20);


  /* =========================================================
     TYPOGRAPHY COLORS
     ========================================================= */

  --color-text: #FFFFFF;
  --color-text-primary: #FFFFFF;
  --color-text-secondary: #B9C4D0;
  --color-text-muted: #8FA1B4;


  /* =========================================================
     STATUS COLORS
     ========================================================= */

  --color-success: #00C853;
  --color-warning: #FFB300;
  --color-error: #FF5252;
  --color-info: #1DA1F2;


  /* =========================================================
     PRIMARY GRADIENT
     ========================================================= */

  --gradient-primary:
    linear-gradient(
      135deg,
      var(--color-accent),
      var(--color-secondary)
    );


  /* =========================================================
     BRAND GRADIENT
     ========================================================= */

  --gradient-brand:
    linear-gradient(
      135deg,
      #0A2342,
      #0E5CAD
    );


  /* =========================================================
     AVIATION BACKGROUND
     ========================================================= */

  --gradient-background:
    radial-gradient(
      circle at 10% 10%,
      rgba(29, 161, 242, 0.18),
      transparent 30%
    ),
    radial-gradient(
      circle at 90% 20%,
      rgba(14, 92, 173, 0.16),
      transparent 32%
    ),
    radial-gradient(
      circle at 50% 100%,
      rgba(10, 35, 66, 0.30),
      transparent 45%
    ),
    linear-gradient(
      135deg,
      #030F1C 0%,
      #061A2D 45%,
      #0A2342 100%
    );


  /* =========================================================
     GLASSMORPHISM
     ========================================================= */

  --glass-background: rgba(255, 255, 255, 0.08);
  --glass-background-strong: rgba(255, 255, 255, 0.12);

  --glass-border: rgba(255, 255, 255, 0.12);

  --glass-blur: blur(18px);


  /* =========================================================
     SHADOWS
     ========================================================= */

  --shadow-sm:
    0 10px 30px rgba(0, 0, 0, 0.16);

  --shadow-md:
    0 16px 40px rgba(0, 0, 0, 0.20);

  --shadow-lg:
    0 20px 60px rgba(0, 0, 0, 0.24);

  --shadow-accent:
    0 16px 33px rgba(29, 161, 242, 0.24);

  --shadow-glow:
    0 0 30px rgba(29, 161, 242, 0.18);


  /* =========================================================
     BORDER RADIUS
     ========================================================= */

  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-pill: 999px;


  /* =========================================================
     LAYOUT
     ========================================================= */

  --max-width: 1200px;
  --content-width: 900px;
  --header-height: 82px;


  /* =========================================================
     SPACING
     ========================================================= */

  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-section: 6rem;


  /* =========================================================
     TYPOGRAPHY
     ========================================================= */

  --font-body: 'Inter', sans-serif;
  --font-heading: 'Poppins', sans-serif;


  /* =========================================================
     TRANSITIONS
     ========================================================= */

  --transition-fast: 150ms ease;
  --transition: 220ms ease;
  --transition-slow: 400ms ease;


  /* =========================================================
     Z-INDEX
     ========================================================= */

  --z-base: 1;
  --z-header: 100;
  --z-overlay: 500;
  --z-modal: 1000;
}