/* ==========================================================================
   FAREGRAM COMPACT TRAVEL SYSTEM — DESIGN TOKENS
   ========================================================================== */
:root {
  /* Brand Navy & Indigo */
  --fg-navy-950: #071A2B;
  --fg-navy-900: #0B2239;
  --fg-navy-850: #0E2945;
  --fg-navy-800: #123356;
  --fg-navy-700: #1A426F;

  /* Travel Primary Blues */
  --fg-blue-700: #075FD8;
  --fg-blue-600: #0878F9;
  --fg-blue-500: #1594FF;
  --fg-blue-400: #42A7FF;
  --fg-blue-100: #D8ECFF;
  --fg-blue-50:  #EEF6FF;

  /* Accent Tones */
  --fg-coral-600: #E64530;
  --fg-coral-500: #F35742;
  --fg-coral-400: #FF725E;
  --fg-coral-50:  #FFF2F0;

  --fg-teal-600:  #0D8A7D;
  --fg-teal-500:  #10A394;
  --fg-teal-50:   #EDF9F8;

  --fg-green-600: #128C56;
  --fg-green-500: #16A36A;
  --fg-green-50:  #ECFDF3;

  --fg-amber-500: #E69512;
  --fg-amber-50:  #FEF9EE;

  /* Ink & Typography Hierarchy */
  --fg-ink-950: #0D1117;
  --fg-ink-900: #161B22;
  --fg-ink-800: #24292F;
  --fg-ink-700: #323842;
  --fg-ink-600: #57606A;
  --fg-ink-500: #6E7781;
  --fg-ink-400: #8C959F;

  /* Surface & Border System */
  --fg-surface:     #FFFFFF;
  --fg-surface-sub: #F9FAFB;
  --fg-canvas:      #F3F5F7;
  --fg-canvas-warm: #F8F9FA;
  --fg-line-200:    #DDE3EA;
  --fg-line-150:    #E7ECF1;
  --fg-line-100:    #EEF2F6;

  /* Footers */
  --fg-footer-light: #F4F6F9;
  --fg-footer-dark:  #06080B;

  /* Elevation & Shadows */
  --fg-shadow-xs: 0 1px 2px rgba(11, 34, 57, 0.04);
  --fg-shadow-sm: 0 2px 5px rgba(11, 34, 57, 0.06);
  --fg-shadow-md: 0 4px 14px rgba(11, 34, 57, 0.08);
  --fg-shadow-lg: 0 10px 28px rgba(11, 34, 57, 0.11);
  --fg-shadow-console: 0 16px 40px -10px rgba(7, 26, 43, 0.16);

  /* Radii */
  --fg-radius-xs: 4px;
  --fg-radius-sm: 6px;
  --fg-radius-md: 10px;
  --fg-radius-lg: 14px;
  --fg-radius-xl: 20px;
  --fg-radius-full: 9999px;

  /* Layout Container */
  --fg-max-width: 1440px;
  --fg-results-max-width: 1560px;

  /* System Fonts */
  --fg-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Icon Sizing Tokens */
  --fg-icon-xs: 14px;
  --fg-icon-sm: 16px;
  --fg-icon-md: 20px;
  --fg-icon-lg: 24px;
  --fg-icon-xl: 28px;
  --fg-icon-service: 26px;

  /* Search Panel Architecture Tokens */
  --search-panel-min-height: auto;
  --search-panel-padding-x: 28px;
  --search-panel-padding-y: 26px;
  --search-header-height: 44px;
  --search-field-height: 94px;
  --search-preferences-min-height: 46px;
  --search-contact-height: 104px;
  --search-action-height: 64px;
  --search-button-width: 400px;
  --search-button-height: 54px;
}

/* ==========================================================================
   FAREGRAM NATIVE-STYLE MOBILE TRAVEL APP DESIGN SYSTEM TOKENS
   ========================================================================== */
:root {
  --fg-app-header-height: 56px;
  --fg-app-bottom-nav-height: 60px;
  --fg-app-action-height: 56px;
  --fg-app-safe-bottom: max(16px, env(safe-area-inset-bottom));
  --fg-app-card-radius: 16px;
  --fg-app-screen-padding: 16px;
  --fg-app-section-gap: 16px;
  --fg-app-divider: #f1f5f9;
  --fg-app-surface: #ffffff;
  --fg-app-canvas: #f8fafc;
}