/*
  TraveHub Design System — Colors & Typography
  =============================================
  Source: TraveHub brand assets (SVG logo analysis)
  Font: Plus Jakarta Sans (Google Fonts) substituting brand's Arial Bold usage
        Inter for body text
        JetBrains Mono for monospace/code
*/

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

/* Inter — self-hosted variable font */
@font-face {
  font-family: 'Inter';
  src: url('fonts/Inter-VariableFont_opsz_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('fonts/Inter-Italic-VariableFont_opsz_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* ───────────────────────────────────────────────────────────────
   BRAND CORE
─────────────────────────────────────────────────────────────── */
:root {
  --brand-blue:  #0063DC;
  --brand-pink:  #FF1A8C;
  --brand-dark:  #111B38;
  --brand-white: #FFFFFF;

  /* ───────────────────────────────────────────────────────────
     COLOR SCALES
  ─────────────────────────────────────────────────────────── */

  /* Blue (primary) */
  --blue-50:  #EBF3FF;
  --blue-100: #D5E7FF;
  --blue-200: #ABCEFF;
  --blue-300: #7FB4FF;
  --blue-400: #4D97FF;
  --blue-500: #1E7AFF;
  --blue-600: #0063DC;   /* ← brand primary */
  --blue-700: #004DB8;
  --blue-800: #003890;
  --blue-900: #002468;
  --blue-950: #001030;

  /* Pink (accent) */
  --pink-50:  #FFE6F3;
  --pink-100: #FFCCE7;
  --pink-200: #FF99CF;
  --pink-300: #FF66B6;
  --pink-400: #FF339E;
  --pink-500: #FF0084;   /* ← brand accent */
  --pink-600: #CC006A;
  --pink-700: #990050;
  --pink-800: #660035;
  --pink-900: #33001A;
  --pink-950: #1A000D;

  /* Navy / Neutral */
  --navy-50:  #EEEEF4;
  --navy-100: #DCDDE9;
  --navy-200: #B8BAD3;
  --navy-300: #9496BC;
  --navy-400: #7173A5;
  --navy-500: #51538B;
  --navy-600: #3D3F6F;
  --navy-700: #2C2D55;
  --navy-800: #1A1A2E;   /* ← brand dark */
  --navy-900: #0F0F1C;
  --navy-950: #07070D;

  /* ───────────────────────────────────────────────────────────
     SEMANTIC COLORS
  ─────────────────────────────────────────────────────────── */
  --color-success:       #00B87A;
  --color-success-light: #E6F9F2;
  --color-success-dark:  #007A52;
  --color-warning:       #FFB800;
  --color-warning-light: #FFF8E6;
  --color-warning-dark:  #A87800;
  --color-error:         #FF3B47;
  --color-error-light:   #FFE8EA;
  --color-error-dark:    #C4001A;
  --color-info:          var(--blue-600);
  --color-info-light:    var(--blue-50);

  /* ───────────────────────────────────────────────────────────
     SEMANTIC FOREGROUND
  ─────────────────────────────────────────────────────────── */
  --fg-primary:    #1A1A2E;
  --fg-secondary:  #48496B;
  --fg-tertiary:   #7B7C99;
  --fg-muted:      #A8A9BF;
  --fg-disabled:   #C5C6D8;
  --fg-on-brand:   #FFFFFF;
  --fg-on-dark:    #FFFFFF;
  --fg-link:       var(--blue-600);
  --fg-link-hover: var(--blue-700);
  --fg-accent:     var(--brand-pink);

  /* ───────────────────────────────────────────────────────────
     SEMANTIC BACKGROUNDS
  ─────────────────────────────────────────────────────────── */
  --bg-page:             #F5F7FC;
  --bg-surface:          #FFFFFF;
  --bg-surface-elevated: #FFFFFF;
  --bg-subtle:           #EEEEF4;
  --bg-brand:            var(--brand-blue);
  --bg-brand-subtle:     var(--blue-50);
  --bg-accent:           var(--brand-pink);
  --bg-accent-subtle:    var(--pink-50);
  --bg-dark:             var(--brand-dark);
  --bg-overlay:          rgba(26, 26, 46, 0.60);

  /* ───────────────────────────────────────────────────────────
     BORDERS
  ─────────────────────────────────────────────────────────── */
  --border-subtle:  #ECEDF5;
  --border-default: #DFE1F0;
  --border-strong:  #C0C3DC;
  --border-focus:   var(--brand-blue);
  --border-error:   var(--color-error);

  /* ───────────────────────────────────────────────────────────
     TYPOGRAPHY
  ─────────────────────────────────────────────────────────── */
  --font-display: 'Space Grotesk', Arial, Helvetica, sans-serif;
  --font-body:    'Inter', Arial, Helvetica, sans-serif;
  --font-mono:    'JetBrains Mono', 'Courier New', monospace;
  --font-num:     'Inter', Arial, Helvetica, sans-serif;  /* prices & times — clean, tabular figures */

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

  /* Font sizes — base 16px */
  --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 */
  --text-6xl:  3.75rem;    /* 60px */
  --text-7xl:  4.5rem;     /* 72px */

  /* Line heights */
  --leading-none:    1.0;
  --leading-tight:   1.2;
  --leading-snug:    1.35;
  --leading-normal:  1.5;
  --leading-relaxed: 1.625;
  --leading-loose:   1.8;

  /* Letter spacing */
  --tracking-tighter: -0.04em;
  --tracking-tight:   -0.02em;
  --tracking-normal:   0em;
  --tracking-wide:     0.04em;
  --tracking-wider:    0.08em;
  --tracking-widest:   0.16em;

  /* ───────────────────────────────────────────────────────────
     SPACING (4pt grid)
  ─────────────────────────────────────────────────────────── */
  --space-0:  0px;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  28px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;
  --space-40: 160px;

  /* ───────────────────────────────────────────────────────────
     BORDER RADIUS
  ─────────────────────────────────────────────────────────── */
  --radius-none: 0px;
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  20px;
  --radius-3xl:  24px;
  --radius-4xl:  32px;
  --radius-icon: 22.5%;   /* app icon proportion */
  --radius-full: 9999px;

  /* ───────────────────────────────────────────────────────────
     SHADOWS (navy-tinted)
  ─────────────────────────────────────────────────────────── */
  --shadow-xs:    0 1px 2px rgba(26,26,46,0.06);
  --shadow-sm:    0 1px 4px rgba(26,26,46,0.08), 0 1px 2px rgba(26,26,46,0.04);
  --shadow-md:    0 4px 12px rgba(26,26,46,0.10), 0 2px 4px rgba(26,26,46,0.06);
  --shadow-lg:    0 8px 24px rgba(26,26,46,0.12), 0 4px 8px rgba(26,26,46,0.06);
  --shadow-xl:    0 16px 48px rgba(26,26,46,0.14), 0 8px 16px rgba(26,26,46,0.08);
  --shadow-2xl:   0 24px 64px rgba(26,26,46,0.18);
  --shadow-brand: 0 8px 24px rgba(0,99,220,0.28);
  --shadow-accent:0 8px 24px rgba(255,0,132,0.28);
  --shadow-inner: inset 0 2px 4px rgba(26,26,46,0.08);

  /* ───────────────────────────────────────────────────────────
     MOTION / ANIMATION
  ─────────────────────────────────────────────────────────── */
  --duration-instant:  50ms;
  --duration-fast:     120ms;
  --duration-normal:   200ms;
  --duration-moderate: 300ms;
  --duration-slow:     400ms;
  --duration-slower:   600ms;

  --ease-default: cubic-bezier(0.4, 0, 0.2, 1);   /* Material standard */
  --ease-bounce:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-spring:  cubic-bezier(0.25, 1.25, 0.5, 1);
  --ease-in:      cubic-bezier(0.4, 0, 1, 1);
  --ease-out:     cubic-bezier(0, 0, 0.2, 1);
  --ease-linear:  linear;

  /* ───────────────────────────────────────────────────────────
     Z-INDEX SCALE
  ─────────────────────────────────────────────────────────── */
  --z-base:     0;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-toast:    500;
}

/* ───────────────────────────────────────────────────────────────
   SEMANTIC TYPE ELEMENTS
─────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--fg-primary);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}

h1 {
  font-family: var(--font-display);
  font-size: var(--text-5xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-primary);
}

h2 {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-primary);
}

h3 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--font-weight-semibold);
  line-height: var(--leading-snug);
  color: var(--fg-primary);
}

h4 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--font-weight-semibold);
  line-height: var(--leading-snug);
  color: var(--fg-primary);
}

h5 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--font-weight-semibold);
  line-height: var(--leading-normal);
  color: var(--fg-primary);
}

h6 {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--font-weight-semibold);
  line-height: var(--leading-normal);
  color: var(--fg-secondary);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

p {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--fg-secondary);
}

.lead {
  font-family: var(--font-body);
  font-size: var(--text-xl);
  line-height: var(--leading-relaxed);
  color: var(--fg-secondary);
}

.caption {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
  color: var(--fg-tertiary);
  letter-spacing: var(--tracking-wide);
}

code, pre {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  background: var(--bg-subtle);
  border-radius: var(--radius-sm);
}

code { padding: 2px 6px; }
pre  { padding: var(--space-4); overflow-x: auto; }

a {
  color: var(--fg-link);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-default);
}
a:hover { color: var(--fg-link-hover); text-decoration: underline; }

/* Label / overline utility */
.overline {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--fg-tertiary);
}