/* =========================================================
   LETSFLY DESIGN SYSTEM — TOKENS
   B2B global travel distribution infrastructure
   Palette per official Brand Visual Specification Manual:
   - Primary blue  #235AFF
   - Sky highlight  #06A7FF
   - Brand navy     #1C1142 (wordmark)
   - Near-black ink #030117
   - AeroHub orange #FF9A23   ·   Accent teal #00DDBA
   - Light gray     #F3F2F7
   ========================================================= */

@import url('fonts.css');

:root {
  /* ---------- NAVY (brand wordmark / dark surfaces) ---------- */
  --lf-navy-50:  #ECEAF2;
  --lf-navy-100: #D5D0E2;
  --lf-navy-200: #ABA2C4;
  --lf-navy-300: #8074A6;
  --lf-navy-400: #564888;
  --lf-navy-500: #3A2D6B;
  --lf-navy-600: #281C56;
  --lf-navy-700: #1C1142;          /* brand default — wordmark navy */
  --lf-navy-800: #130B30;
  --lf-navy-900: #030117;          /* near-black ink */

  /* ---------- BLUE (primary action) ---------- */
  --lf-blue-50:  #EBF0FF;
  --lf-blue-100: #D6E1FF;
  --lf-blue-200: #ADC3FF;
  --lf-blue-300: #85A5FF;
  --lf-blue-400: #5C87FF;
  --lf-blue-500: #235AFF;          /* PRIMARY BLUE — standard color */
  --lf-blue-600: #1C48CC;
  --lf-blue-700: #163699;
  --lf-blue-800: #0F2466;
  --lf-blue-900: #081233;

  /* ---------- SKY (highlight / secondary) ---------- */
  --lf-sky-50:   #E6F6FF;
  --lf-sky-100:  #BFE9FF;
  --lf-sky-200:  #80D3FF;
  --lf-sky-300:  #40BDFF;
  --lf-sky-400:  #06A7FF;          /* SKY — standard color */
  --lf-sky-500:  #0594E0;
  --lf-sky-600:  #047AB8;
  --lf-sky-700:  #036090;
  --lf-sky-800:  #024668;
  --lf-sky-900:  #012C40;

  /* ---------- ORANGE (AeroHub sub-brand) ---------- */
  --lf-orange-50:  #FFF4E6;
  --lf-orange-100: #FFE3BF;
  --lf-orange-200: #FFCC80;
  --lf-orange-300: #FFB54D;
  --lf-orange-400: #FF9A23;         /* AEROHUB ORANGE — standard color */
  --lf-orange-500: #E5851A;
  --lf-orange-600: #B8690F;
  --lf-orange-700: #8A4E0A;
  --lf-orange-800: #5C3406;
  --lf-orange-900: #2E1A03;

  /* ---------- TEAL (auxiliary accent) ---------- */
  --lf-teal-50:  #E0FBF6;
  --lf-teal-100: #B3F5E9;
  --lf-teal-200: #80EEDB;
  --lf-teal-300: #4DE6CD;
  --lf-teal-400: #00DDBA;          /* TEAL — auxiliary accent */
  --lf-teal-500: #00C4A4;
  --lf-teal-600: #009E85;
  --lf-teal-700: #007865;
  --lf-teal-800: #005246;
  --lf-teal-900: #002C26;

  /* Signature brand gradient (mark: blue → sky) */
  --lf-gradient-brand: linear-gradient(135deg, #235AFF 0%, #06A7FF 100%); /* @kind color */
  --lf-gradient-brand-deep: linear-gradient(135deg, #1C48CC 0%, #0594E0 100%); /* @kind color */

  /* Product accents */
  --lf-aerohub: var(--lf-orange-400);  /* orange — air */
  --lf-hibeds:  var(--lf-blue-500);    /* blue — hotel */

  /* ---------- SEMANTIC ---------- */
  --lf-success-50:  #E6F5EC;
  --lf-success-500: #1F8A4C;
  --lf-success-700: #145E34;
  --lf-warning-50:  #FDF3E0;
  --lf-warning-500: #C68617;
  --lf-warning-700: #8A5C0E;
  --lf-danger-50:   #FCEBEA;
  --lf-danger-500:  #C83A2F;
  --lf-danger-700:  #8C281F;

  /* ---------- NEUTRALS (cool, tuned against navy) ---------- */
  --lf-paper:     #F8F8FB;
  --lf-cloud:     #F3F2F7;            /* official light gray */
  --lf-fog-50:    #F3F2F7;            /* official light gray */
  --lf-fog-100:   #E6E4EE;
  --lf-fog-200:   #D2CFDD;
  --lf-fog-300:   #B0ABC1;
  --lf-fog-400:   #827C97;
  --lf-fog-500:   #5C566E;
  --lf-fog-600:   #3D3850;
  --lf-fog-700:   #221D33;
  --lf-ink:       #030117;            /* near-black ink */

  /* ---------- ALIASES ---------- */
  --lf-bg:            var(--lf-paper);
  --lf-bg-elevated:   #FFFFFF;
  --lf-bg-sunken:     var(--lf-fog-50);
  --lf-bg-inverse:    var(--lf-navy-700);

  --lf-fg:            var(--lf-ink);
  --lf-fg-muted:      var(--lf-fog-500);
  --lf-fg-subtle:     var(--lf-fog-400);
  --lf-fg-inverse:    #FFFFFF;

  --lf-border:        var(--lf-fog-200);
  --lf-border-strong: var(--lf-fog-300);
  --lf-border-inverse: rgba(255,255,255,0.12);

  --lf-brand:         var(--lf-blue-500);
  --lf-accent:        var(--lf-sky-400);

  /* ---------- TYPE ---------- */
  --lf-font-display: 'Poppins', 'Alibaba PuHuiTi 3.0', -apple-system, system-ui, sans-serif;
  --lf-font-sans:    'Poppins', 'Alibaba PuHuiTi 3.0', -apple-system, 'Segoe UI', system-ui, sans-serif;
  --lf-font-mono:    ui-monospace, 'SFMono-Regular', 'Menlo', 'Consolas', monospace;

  --lf-text-xs:    11px;
  --lf-text-sm:    13px;
  --lf-text-base:  15px;
  --lf-text-md:    17px;
  --lf-text-lg:    20px;
  --lf-text-xl:    24px;
  --lf-text-2xl:   32px;
  --lf-text-3xl:   44px;
  --lf-text-4xl:   64px;
  --lf-text-5xl:   88px;
  --lf-text-6xl:   120px;

  --lf-leading-tight:  1.08;
  --lf-leading-snug:   1.2;
  --lf-leading-normal: 1.45;
  --lf-leading-relaxed:1.6;

  --lf-tracking-tight:  -0.02em;
  --lf-tracking-normal:  0;
  --lf-tracking-wide:    0.04em;
  --lf-tracking-caps:    0.12em;

  /* ---------- SPACING ---------- */
  --lf-space-1:  4px;  --lf-space-2:  8px;  --lf-space-3:  12px;
  --lf-space-4:  16px; --lf-space-5:  20px; --lf-space-6:  24px;
  --lf-space-8:  32px; --lf-space-10: 40px; --lf-space-12: 48px;
  --lf-space-16: 64px; --lf-space-20: 80px; --lf-space-24: 96px;
  --lf-space-32: 128px;

  /* ---------- RADII ---------- */
  --lf-radius-xs: 2px;  --lf-radius-sm: 4px;  --lf-radius-md: 6px;
  --lf-radius-lg: 10px; --lf-radius-xl: 16px; --lf-radius-2xl: 24px;
  --lf-radius-pill: 999px;

  /* ---------- ELEVATION ---------- */
  --lf-shadow-xs: 0 1px 0 rgba(28,17,66,0.04), 0 1px 2px rgba(28,17,66,0.06);
  --lf-shadow-sm: 0 1px 2px rgba(28,17,66,0.06), 0 2px 6px rgba(28,17,66,0.06);
  --lf-shadow-md: 0 2px 4px rgba(28,17,66,0.06), 0 8px 20px rgba(28,17,66,0.08);
  --lf-shadow-lg: 0 8px 24px rgba(28,17,66,0.10), 0 24px 48px rgba(28,17,66,0.10);
  --lf-shadow-brand: 0 8px 24px rgba(35,90,255,0.28);
  --lf-shadow-focus: 0 0 0 3px rgba(35,90,255,0.25);

  /* ---------- MOTION ---------- */
  --lf-ease-out:   cubic-bezier(0.2, 0.8, 0.2, 1); /* @kind other */
  --lf-ease-inout: cubic-bezier(0.6, 0, 0.2, 1); /* @kind other */
  --lf-dur-1: 120ms; /* @kind other */
  --lf-dur-2: 200ms; /* @kind other */
  --lf-dur-3: 320ms; /* @kind other */
  --lf-dur-4: 600ms; /* @kind other */

  /* ---------- LAYOUT ---------- */
  --lf-container: 1280px;
  --lf-container-tight: 1040px;
  --lf-gutter: var(--lf-space-6);
}

/* ---------- BASE ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--lf-font-sans);
  font-size: var(--lf-text-base);
  line-height: var(--lf-leading-normal);
  color: var(--lf-fg);
  background: var(--lf-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- HELPERS ---------- */
.lf-eyebrow {
  font-family: var(--lf-font-mono);
  font-size: var(--lf-text-xs);
  text-transform: uppercase;
  letter-spacing: var(--lf-tracking-caps);
  color: var(--lf-fg-muted);
  font-weight: 500;
}
.lf-mono { font-family: var(--lf-font-mono); font-feature-settings: 'tnum'; }
.lf-tnum { font-variant-numeric: tabular-nums; }

.lf-brand-text {
  background: var(--lf-gradient-brand);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

.lf-rule { height: 1px; background: var(--lf-border); border: 0; margin: 0; }
.lf-rule--strong { background: var(--lf-border-strong); }
.lf-rule--inverse { background: var(--lf-border-inverse); }

:focus-visible { outline: 2px solid var(--lf-blue-500); outline-offset: 2px; }