/* ═════════════════════════════════════════════════════════════
   AERIOS DESIGN-SYSTEM TOKENS — canonical reference
   Enterprise Aviation SaaS UI

   Authoritative source for every CSS custom property used across
   the Aerios prototype suite. Consumed by base.css, components.css,
   and page-local styles.

   ► Always reference values via var(--*); never inline raw hex.
   ► When a value doesn't fit the scale, that's a signal to either
     adjust the scale here, or rethink the design.
   ═════════════════════════════════════════════════════════════ */

:root {

  /* ─────────────────────────────────────────────────────────
     BRAND / CORE — deep navy command-center
     ───────────────────────────────────────────────────────── */
  --color-brand-950: #04101F;
  --color-brand-900: #071B34;
  --color-brand-800: #0B2645;
  --color-brand-700: #12355F;
  --color-brand-600: #1D4C84;
  --color-brand-500: #2A6BC7;

  /* ─────────────────────────────────────────────────────────
     BACKGROUNDS
     ───────────────────────────────────────────────────────── */
  --color-bg-app:         #F4F7FB;   /* cool-tinted soft canvas    */
  --color-bg-surface:     #FFFFFF;   /* elevated white panels      */
  --color-bg-surface-alt: #F8FAFC;   /* table heads / subtle wash  */
  --color-bg-elevated:    #FFFFFF;   /* modals / dropdowns         */
  --color-bg-hover:       #F1F5F9;   /* row + button hover         */
  --color-bg-selected:    #E8F0FF;   /* selected row / item state  */
  --color-bg-overlay:     rgba(4, 16, 31, 0.45);

  /* ─────────────────────────────────────────────────────────
     TEXT
     ───────────────────────────────────────────────────────── */
  --color-text-primary:   #0F172A;   /* slate-900                 */
  --color-text-secondary: #475569;   /* slate-600                 */
  --color-text-muted:     #64748B;   /* slate-500 (long-session)  */
  --color-text-disabled:  #94A3B8;   /* slate-400                 */
  --color-text-inverse:   #FFFFFF;

  /* ─────────────────────────────────────────────────────────
     BORDERS
     ───────────────────────────────────────────────────────── */
  --color-border-subtle:  #E2E8F0;   /* slate-200                 */
  --color-border-default: #CBD5E1;   /* slate-300                 */
  --color-border-strong:  #94A3B8;   /* slate-400                 */
  --color-border-focus:   #2A6BC7;   /* brand-500                 */

  /* ─────────────────────────────────────────────────────────
     STATUS COLORS — four-stop scales for badges + alerts
     ───────────────────────────────────────────────────────── */
  --color-success-50:  #F0FDF4;   --color-success-100: #DCFCE7;
  --color-success-500: #22C55E;   --color-success-700: #15803D;

  --color-warning-50:  #FFF7ED;   --color-warning-100: #FFEDD5;
  --color-warning-500: #F97316;   --color-warning-700: #C2410C;

  --color-danger-50:   #FEF2F2;   --color-danger-100:  #FEE2E2;
  --color-danger-500:  #EF4444;   --color-danger-700:  #B91C1C;

  --color-info-50:     #EFF6FF;   --color-info-100:    #DBEAFE;
  --color-info-500:    #3B82F6;   --color-info-700:    #1D4ED8;

  /* ─────────────────────────────────────────────────────────
     OPERATIONAL STATES — flight / movement row coloring
     ───────────────────────────────────────────────────────── */
  --color-flight-active-bg:     #F0FDF4;
  --color-flight-active-border: #22C55E;
  --color-flight-active-text:   #166534;

  --color-flight-inactive-bg:     #FEF2F2;
  --color-flight-inactive-border: #EF4444;
  --color-flight-inactive-text:   #991B1B;

  --color-flight-pending-bg:     #FFF7ED;
  --color-flight-pending-border: #F59E0B;
  --color-flight-pending-text:   #92400E;

  --color-flight-neutral-bg:     #F8FAFC;
  --color-flight-neutral-border: #CBD5E1;
  --color-flight-neutral-text:   #475569;

  /* ─────────────────────────────────────────────────────────
     NAVIGATION — top bar surfaces
     ───────────────────────────────────────────────────────── */
  --color-nav-bg:     #071B34;
  --color-nav-hover:  rgba(255,255,255,0.06);
  --color-nav-active: rgba(255,255,255,0.12);
  --color-nav-border: rgba(255,255,255,0.08);

  /* ─────────────────────────────────────────────────────────
     SHADOWS — subtle, low-opacity elevation
     ───────────────────────────────────────────────────────── */
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08), 0 2px 4px rgba(15, 23, 42, 0.04);
  --shadow-lg: 0 10px 24px rgba(15, 23, 42, 0.10), 0 4px 8px rgba(15, 23, 42, 0.06);
  --shadow-xl: 0 20px 40px rgba(15, 23, 42, 0.14), 0 8px 16px rgba(15, 23, 42, 0.08);

  /* ─────────────────────────────────────────────────────────
     RADIUS — squared by product decision
     All surfaces use square corners. Only `--radius-pill` is
     non-zero, reserved for count badges (notification dots,
     sidebar counters, filter badges). Scale tokens are kept
     in place for future re-introduction without renaming.
     ───────────────────────────────────────────────────────── */
  --radius-xs:   0;
  --radius-sm:   0;
  --radius-md:   0;
  --radius-lg:   0;
  --radius-xl:   0;
  --radius-2xl:  0;
  --radius-pill: 999px;

  /* ─────────────────────────────────────────────────────────
     SPACING — 4px base scale
     ───────────────────────────────────────────────────────── */
  --space-0:  0;
  --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;
  --space-16: 64px;
  --space-20: 80px;

  /* ─────────────────────────────────────────────────────────
     TYPOGRAPHY — families
     ───────────────────────────────────────────────────────── */
  --font-sans: "IBM Plex Sans", "Inter", system-ui, -apple-system,
               BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: "IBM Plex Mono", "JetBrains Mono", "SF Mono",
               Menlo, Consolas, monospace;

  /* ─────────────────────────────────────────────────────────
     FONT SIZES — operator-dense scale
     ───────────────────────────────────────────────────────── */
  --text-xs:    11px;
  --text-sm:    12px;
  --text-md:    13px;
  --text-base:  14px;
  --text-lg:    16px;
  --text-xl:    18px;
  --text-2xl:   24px;
  --text-3xl:   30px;

  /* ─────────────────────────────────────────────────────────
     FONT WEIGHTS
     ───────────────────────────────────────────────────────── */
  --font-regular:  400;
  --font-medium:   500;
  --font-semibold: 600;
  --font-bold:     700;

  /* ─────────────────────────────────────────────────────────
     LINE HEIGHTS
     ───────────────────────────────────────────────────────── */
  --leading-tight:   1.2;
  --leading-normal:  1.45;
  --leading-relaxed: 1.6;

  /* ─────────────────────────────────────────────────────────
     LAYOUT — fixed dimensions
     ───────────────────────────────────────────────────────── */
  --topbar-height:          64px;
  --sidebar-width:          72px;
  --sidebar-expanded-width: 260px;
  --panel-width:            320px;

  /* ─────────────────────────────────────────────────────────
     TABLE / GRID
     ───────────────────────────────────────────────────────── */
  --table-row-height:      44px;
  --table-header-height:   40px;
  --table-cell-padding-x:  12px;
  --table-cell-padding-y:  10px;
  --table-grid-border:     #E2E8F0;
  --table-row-hover:       #F8FAFC;
  --table-row-selected:    #E8F0FF;

  /* ─────────────────────────────────────────────────────────
     ANIMATION — precise, low-drama easings
     ───────────────────────────────────────────────────────── */
  --ease-standard:   cubic-bezier(0.2, 0, 0, 1);
  --ease-decelerate: cubic-bezier(0, 0, 0, 1);
  --ease-accelerate: cubic-bezier(0.3, 0, 1, 1);

  --duration-fast:   120ms;
  --duration-normal: 180ms;
  --duration-slow:   260ms;

  /* ─────────────────────────────────────────────────────────
     Z-INDEX SCALE
     ───────────────────────────────────────────────────────── */
  --z-base:     1;
  --z-dropdown: 1000;
  --z-sticky:   1100;
  --z-overlay:  1200;
  --z-modal:    1300;
  --z-toast:    1400;


  /* ═════════════════════════════════════════════════════════
     BACK-COMPAT ALIASES
     Point legacy variable names at the canonical tokens so all
     existing rules across the suite pick up the new palette
     without touching each rule individually. Authors of NEW
     code should reference the canonical tokens above directly.
     ═════════════════════════════════════════════════════════ */

  /* Brand */
  --primary:        var(--color-brand-900);
  --primary-dark:   var(--color-brand-950);
  --accent:         var(--color-brand-500);
  --accent-light:   var(--color-info-50);
  --coral:          var(--color-danger-500);

  /* Surfaces */
  --page-bg:        var(--color-bg-app);
  --surface:        var(--color-bg-surface);
  --sidebar-bg:     var(--color-nav-bg);

  /* Borders */
  --border:         var(--color-border-default);
  --border-light:   var(--color-border-subtle);

  /* Text */
  --text-primary:   var(--color-text-primary);
  --text-secondary: var(--color-text-secondary);
  --text-muted:     var(--color-text-muted);

  /* Status — green */
  --green-bg:       var(--color-success-100);
  --green-text:     var(--color-success-700);
  --green-border:   var(--color-success-500);

  /* Status — amber */
  --amber-bg:       var(--color-warning-100);
  --amber-text:     var(--color-warning-700);

  /* Status — red */
  --red-bg:         var(--color-danger-100);
  --red-text:       var(--color-danger-700);

  /* Status — violet (matched / informational) */
  --violet-bg:      #EDE9FE;
  --violet-text:    #6D28D9;

  /* Status — slate (closed / disposed) */
  --slate-bg:       #F1F5F9;
  --slate-text:     #475569;

  /* Typography aliases */
  --font:           var(--font-sans);
  --mono:           var(--font-mono);

  /* Shadow aliases */
  --sh-sm:          var(--shadow-sm);
  --sh-md:          var(--shadow-md);
  --sh-lg:          var(--shadow-lg);

  /* Motion alias */
  --tr:             var(--duration-fast) var(--ease-standard);

  /* Font-size aliases — existing scale → new spec */
  --fs-micro:    var(--text-xs);    /* 11px — tiny status pills, micro labels   */
  --fs-caption:  var(--text-xs);    /* 11px — uppercase eyebrows, table TH      */
  --fs-xs:       var(--text-sm);    /* 12px — code badges, dense mono, hints    */
  --fs-sm:       var(--text-md);    /* 13px — page subtitles, dense table cells */
  --fs-body:     var(--text-base);  /* 14px — default body, table cells         */
  --fs-md:       var(--text-base);  /* 14px — form inputs, buttons              */
  --fs-h3:       var(--text-lg);    /* 16px — modal/panel titles                */
  --fs-h2:       var(--text-xl);    /* 18px — secondary headlines               */
  --fs-h1:       var(--text-2xl);   /* 24px — page titles                       */
  --fs-display:  var(--text-3xl);   /* 30px — KPI values, hero numbers          */
}