/* ============================================================
   VARIABLES.CSS
   eIAWS — Enterprise Integrated Aviation Weather System
   I.M. Systems Group
   Design Tokens — edit here to retheme the entire application
   ============================================================ */

:root {

  /* ----------------------------------------------------------
     BRAND COLORS
     ---------------------------------------------------------- */
  --color-accent-primary:      #02AAFC;   /* aviation aqua — main accent */
  --color-accent-secondary:    #c5c522;   /* caution yellow — secondary accent */
  --color-action:              #2563eb;   /* interactive blue */
  --color-action-hover:        #1d4ed8;
  --color-action-light:        #60a5fa;

  /* ----------------------------------------------------------
     BACKGROUNDS
     ---------------------------------------------------------- */
  --bg-page:                   #f3f4f6;
  --bg-surface:                #111827;   /* deepest dark surface */
  --bg-panel:                  #1f2937;   /* main panel / tab content */
  --bg-card:                   #374151;   /* card / metric tile */
  --bg-card-dark:              #111827;   /* elevated card variant */
  --bg-input:                  #1f2937;
  --bg-navbar:                 #1f2937;
  --bg-overlay:                rgba(0, 0, 0, 0.75);

  /* ----------------------------------------------------------
     TEXT
     ---------------------------------------------------------- */
  --text-primary:              #ffffff;
  --text-secondary:            #d1d5db;
  --text-muted:                #9ca3af;
  --text-label:                #6b7280;
  --text-accent:               var(--color-accent-primary);
  --text-danger:               #f87171;
  --text-success:              #4ade80;

  /* ----------------------------------------------------------
     BORDERS
     ---------------------------------------------------------- */
  --border-color:              #4b5563;
  --border-color-light:        #6b7280;
  --border-color-subtle:       rgba(255, 255, 255, 0.1);
  --border-radius-sm:          6px;
  --border-radius-md:          8px;
  --border-radius-lg:          12px;
  --border-radius-xl:          16px;
  --border-radius-pill:        9999px;

  /* ----------------------------------------------------------
     SPACING SCALE
     ---------------------------------------------------------- */
  --space-1:    4px;
  --space-2:    8px;
  --space-3:    12px;
  --space-4:    16px;
  --space-5:    20px;
  --space-6:    24px;
  --space-8:    32px;
  --space-10:   40px;
  --space-12:   48px;

  /* ----------------------------------------------------------
     TYPOGRAPHY
     ---------------------------------------------------------- */
  --font-sans:   'IBM Plex Sans', 'Segoe UI', sans-serif;
  --font-mono:   'IBM Plex Mono', 'Fira Mono', 'Courier New', monospace;

  --text-xs:     0.75rem;    /* 12px */
  --text-sm:     0.875rem;   /* 14px */
  --text-base:   1rem;       /* 16px */
  --text-lg:     1.125rem;   /* 18px */
  --text-xl:     1.25rem;    /* 20px */
  --text-2xl:    1.5rem;     /* 24px */
  --text-3xl:    1.875rem;   /* 30px */
  --text-4xl:    2.25rem;    /* 36px */
  --text-5xl:    3rem;       /* 48px */

  --weight-normal:    400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;
  --weight-extrabold: 800;

  /* ----------------------------------------------------------
     SHADOWS
     ---------------------------------------------------------- */
  --shadow-sm:   0 1px 3px rgba(0, 0, 0, 0.2);
  --shadow-md:   0 4px 10px rgba(0, 0, 0, 0.3);
  --shadow-lg:   0 10px 25px rgba(0, 0, 0, 0.4);
  --shadow-xl:   0 20px 40px rgba(0, 0, 0, 0.5);

  /* Glass effect shadows */
  --shadow-glass:       0 4px 15px rgba(0, 0, 0, 0.3);
  --shadow-glass-hover: 0 6px 20px rgba(0, 0, 0, 0.5);

  /* ----------------------------------------------------------
     GLASS EFFECT
     ---------------------------------------------------------- */
  --glass-bg:     rgba(255, 255, 255, 0.1);
  --glass-border: rgba(255, 255, 255, 0.2);
  --glass-hover:  rgba(255, 255, 255, 0.2);

  /* ----------------------------------------------------------
     TRANSITIONS
     ---------------------------------------------------------- */
  --transition-fast:     all 0.15s ease;
  --transition-standard: all 0.3s ease;
  --transition-slow:     all 0.5s ease;

  /* ----------------------------------------------------------
     LAYOUT
     ---------------------------------------------------------- */
  --navbar-height:       56px;
  --panel-max-width:     1400px;
  --map-height:          1100px;
}