/* =========================================================================
   AA Flights design-token layer (UI/UX refactor Session 2).

   Centralized visual foundation for the redesigned ("next") experience,
   defined as CSS custom properties (AGENTS.md D2: no build pipeline). All
   tokens use the `--aa-` namespace so they cannot collide with the classic
   dashboard.css variables (`--bg`, `--card`, `--mut`, `--line`, `--txt`).
   The classic dashboard does not reference any `--aa-*` token, so loading
   this sheet is visually inert for the classic surface (byte-stable).

   Theme: premium light (design doc Section 9). Later sessions consume these
   tokens; this file defines them only. Responsive breakpoints are exposed
   as reference values (CSS custom properties cannot themselves wrap media
   queries); later sessions author `@media (min-width: var(--aa-bp-*))` is
   not valid, so breakpoints are documented here and used literally in
   `@media` rules by consumers.

   Categories (design doc Section 9 / Section 30):
     1. Typography (family, sizes, weights, line-heights, tabular numerics)
     2. Spacing scale
     3. Radius scale
     4. Shadow scale (restrained)
     5. Border tokens
     6. Base color (surfaces, text, line, brand accent, focus ring)
     7. Status colors (ok / warning / error / info)
     8. Score-band colors (>=90 / 75-89 / 60-74 / 40-59 / <40)
     9. SWU colors (coverage tiers + message keys)
    10. Calendar colors (drilled/qualifying, searched, estimate, non-qualifying)
    11. Transitions
    12. z-index scale
    13. Responsive breakpoints (reference values)
   ========================================================================= */

:root {
  /* ---- 1. Typography ------------------------------------------------ */
  --aa-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;
  --aa-font-mono: "SF Mono", "Menlo", "Consolas", "Courier New", monospace;

  /* Type scale: 12 / 13 / 14 / 16 / 18 / 22 / 28 / 34 */
  --aa-fs-xs:   12px;
  --aa-fs-sm:   13px;
  --aa-fs-base: 14px;
  --aa-fs-md:   16px;
  --aa-fs-lg:   18px;
  --aa-fs-xl:   22px;
  --aa-fs-2xl:  28px;
  --aa-fs-3xl:  34px;

  --aa-fw-regular:  400;
  --aa-fw-medium:   500;
  --aa-fw-semibold: 600;
  --aa-fw-bold:     700;
  --aa-fw-extrabold: 800;

  --aa-lh-tight:   1.2;
  --aa-lh-snug:    1.35;
  --aa-lh-normal:  1.45;
  --aa-lh-relaxed: 1.6;

  /* Tabular numerics for miles / prices / scores (design doc Section 9). */
  --aa-num-tabular: "tnum" 1, "tnum" 1, "tabular-nums";
  --aa-font-numeric: var(--aa-font-sans);
  font-feature-settings: "tnum" 1;
  --aa-num-font: var(--aa-font-sans);

  /* ---- 2. Spacing scale (2, 4, 8, 12, 16, 24, 32, 48) ---------------- */
  --aa-space-1:  2px;
  --aa-space-2:  4px;
  --aa-space-3:  8px;
  --aa-space-4:  12px;
  --aa-space-5:  16px;
  --aa-space-6:  24px;
  --aa-space-7:  32px;
  --aa-space-8:  48px;

  /* ---- 3. Radius scale --------------------------------------------- */
  --aa-radius-xs:  3px;
  --aa-radius-sm:  5px;
  --aa-radius-md:  8px;
  --aa-radius-lg:  12px;
  --aa-radius-xl:  16px;
  --aa-radius-pill: 999px;

  /* ---- 4. Shadow scale (restrained) ------------------------------- */
  --aa-shadow-sm:  0 1px 2px rgba(15, 23, 42, 0.06);
  --aa-shadow-md:  0 2px 8px rgba(15, 23, 42, 0.08);
  --aa-shadow-lg:  0 8px 24px rgba(15, 23, 42, 0.10);
  --aa-shadow-focus: 0 0 0 3px var(--aa-color-focus-ring);

  /* ---- 5. Border tokens -------------------------------------------- */
  --aa-border-1: 1px;
  --aa-border-2: 2px;
  --aa-border-style: solid;
  --aa-border-dashed: dashed;

  /* ---- 6. Base color (premium light) ------------------------------ */
  /* Surfaces */
  --aa-color-page:      #f7f8fa;
  --aa-color-card:      #ffffff;
  --aa-color-elevated:  #ffffff;
  --aa-color-overlay:   rgba(15, 23, 42, 0.45);

  /* Text on light */
  --aa-color-text-primary:   #1a2332;
  --aa-color-text-secondary: #4a5568;
  --aa-color-text-muted:     #8a97a8;

  /* Lines / borders */
  --aa-color-line:        #e2e6ec;
  --aa-color-line-strong: #c9d0da;

  /* Brand accent */
  --aa-color-brand:        #1b3a6b;
  --aa-color-brand-soft:  #eaf1fb;
  --aa-color-brand-ink:   #0f2444;

  /* Focus ring */
  --aa-color-focus-ring:  rgba(27, 58, 107, 0.35);
  --aa-color-focus:       #1b3a6b;

  /* ---- 7. Status colors (ok / warning / error / info) -------------- */
  --aa-status-ok-fg:        #1f7a3d;
  --aa-status-ok-bg:        #e8f6ee;
  --aa-status-ok-border:    #bfe3cd;
  --aa-status-warning-fg:   #8a5a12;
  --aa-status-warning-bg:   #fdf3e0;
  --aa-status-warning-border:#f0d9a8;
  --aa-status-error-fg:     #b3261e;
  --aa-status-error-bg:     #fdecec;
  --aa-status-error-border: #f3c2c0;
  --aa-status-info-fg:      #1b4f8a;
  --aa-status-info-bg:      #e8f1fb;
  --aa-status-info-border:  #c2d8ef;

  /* ---- 8. Score-band colors (>=90 / 75-89 / 60-74 / 40-59 / <40) ---- */
  /* Pairs with the existing score_class() helper: s-ex / s-good / s-ok /
     s-mid / s-bad (design doc Section 9). */
  --aa-score-ex-fg:    #1f7a3d;
  --aa-score-ex-bg:    #e8f6ee;
  --aa-score-ex-border:#bfe3cd;
  --aa-score-good-fg:  #3a8a1f;
  --aa-score-good-bg:  #eef8e4;
  --aa-score-good-border:#cfe8b8;
  --aa-score-ok-fg:    #8a6a12;
  --aa-score-ok-bg:    #fdf3e0;
  --aa-score-ok-border:#f0d9a8;
  --aa-score-mid-fg:   #b35a12;
  --aa-score-mid-bg:   #fdeede;
  --aa-score-mid-border:#f3c9a0;
  --aa-score-bad-fg:   #b3261e;
  --aa-score-bad-bg:   #fdecec;
  --aa-score-bad-border:#f3c2c0;

  /* ---- 9. SWU colors (coverage tiers + message keys) --------------- */
  /* Coverage tiers: all / most / one / none */
  --aa-swu-all-fg:     #1f7a3d;
  --aa-swu-all-bg:     #e8f6ee;
  --aa-swu-all-border: #bfe3cd;
  --aa-swu-most-fg:    #1b4f8a;
  --aa-swu-most-bg:    #e8f1fb;
  --aa-swu-most-border:#c2d8ef;
  --aa-swu-one-fg:     #8a6a12;
  --aa-swu-one-bg:     #fdf3e0;
  --aa-swu-one-border: #f0d9a8;
  --aa-swu-none-fg:    #6b7280;
  --aa-swu-none-bg:    #f1f2f4;
  --aa-swu-none-border:#d8dce2;

  /* Message keys: UPGRADEABLE / NOT-AVAILABLE / NO-HIGHER-CABIN */
  --aa-swu-upg-fg:     #1f7a3d;
  --aa-swu-upg-bg:     #e8f6ee;
  --aa-swu-upg-border: #bfe3cd;
  --aa-swu-na-fg:      #b3261e;
  --aa-swu-na-bg:      #fdecec;
  --aa-swu-na-border: #f3c2c0;
  --aa-swu-nhc-fg:     #6b7280;
  --aa-swu-nhc-bg:     #f1f2f4;
  --aa-swu-nhc-border: #d8dce2;

  /* ---- 10. Calendar colors ---------------------------------------- */
  /* Drilled + qualifying (authoritative; matches award_flights) */
  --aa-cal-drilled-fg:     #1f7a3d;
  --aa-cal-drilled-bg:     #e8f6ee;
  --aa-cal-drilled-border: #bfe3cd;
  /* Searched (confirmed but not drilled) */
  --aa-cal-searched-fg:    #1b4f8a;
  --aa-cal-searched-bg:    #e8f1fb;
  --aa-cal-searched-border:#c2d8ef;
  /* Estimate (unconfirmed; dashed border) */
  --aa-cal-estimate-fg:    #6b5a8a;
  --aa-cal-estimate-bg:    #f1eef6;
  --aa-cal-estimate-border:#d2c9e0;
  /* Non-qualifying */
  --aa-cal-none-fg:        #8a97a8;
  --aa-cal-none-bg:        #f1f2f4;
  --aa-cal-none-border:    #d8dce2;

  /* ---- 11. Transitions -------------------------------------------- */
  --aa-transition-fast:   120ms ease;
  --aa-transition-base:   200ms ease;
  --aa-transition-slow:   320ms ease;
  --aa-transition-modal: 240ms cubic-bezier(0.2, 0.8, 0.2, 1);

  /* ---- 12. z-index scale ------------------------------------------ */
  --aa-z-base:      1;
  --aa-z-sticky:    100;
  --aa-z-nav:       200;
  --aa-z-dropdown:  400;
  --aa-z-overlay:   800;
  --aa-z-modal:     1000;
  --aa-z-toast:     1100;
  --aa-z-tooltip:   1200;

  /* ---- 13. Responsive breakpoints (reference values) ------------- */
  /* phone < 640, tablet 640-1024, desktop > 1024, wide >= 1440.
     Consumers use these literals inside @media rules; they are recorded
     here as the single source of truth for breakpoint values. */
  --aa-bp-phone:   640px;
  --aa-bp-tablet:  1024px;
  --aa-bp-desktop: 1025px;
  --aa-bp-wide:    1440px;

  /* Page width caps */
  --aa-width-page:   1180px;
  --aa-width-wide:   1440px;
}

/* Reduced-motion support (design doc Section 22). Later sessions honor this
   by referencing these tokens for animation/transition durations. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --aa-transition-fast:  1ms;
    --aa-transition-base:  1ms;
    --aa-transition-slow:  1ms;
    --aa-transition-modal: 1ms;
  }
}