/* STAJets Design System — Colors & Type */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;500;600;700&family=Montserrat:wght@300;400;500;600;700&display=swap');

:root {
  /* ---------- COLOR PALETTE ---------- */
  /* Primary brand color — STAJets logo navy */
  --sta-navy: #2A2F3A;
  --sta-navy-deep: #1B1F28;
  --sta-navy-soft: #3A4150;

  /* Neutrals — refined whites + warm greys (interior cabin tones) */
  --sta-white: #FFFFFF;
  --sta-bone: #F7F5F1;          /* warm off-white, like cabin leather */
  --sta-mist: #EDEDEA;
  --sta-stone: #C9C7C2;
  --sta-graphite: #6E7280;
  --sta-charcoal: #3C3F46;
  --sta-black: #0E1014;

  /* Accent — discreet champagne/gold (used sparingly for premium cues) */
  --sta-champagne: #C9A36B;
  --sta-champagne-soft: #E4D2B0;

  /* Semantic — minimal, muted */
  --sta-success: #4A7A5C;
  --sta-warning: #B7873E;
  --sta-error:   #A14A45;
  --sta-info:    #4A6A82;

  /* Foreground / background tokens */
  --fg-1: var(--sta-navy);          /* primary text on light */
  --fg-2: var(--sta-charcoal);      /* secondary text */
  --fg-3: var(--sta-graphite);      /* tertiary / metadata */
  --fg-inverse: var(--sta-white);   /* text on dark */

  --bg-1: var(--sta-white);         /* primary canvas */
  --bg-2: var(--sta-bone);          /* secondary surface */
  --bg-3: var(--sta-mist);          /* card surface */
  --bg-inverse: var(--sta-navy);    /* dark hero / footer */
  --bg-inverse-deep: var(--sta-navy-deep);

  --border-1: rgba(42,47,58,0.12);
  --border-2: rgba(42,47,58,0.22);
  --border-inverse: rgba(255,255,255,0.16);

  /* ---------- TYPOGRAPHY ---------- */
  /* Logo wordmark is wide-tracked geometric sans (think Avenir/Futura). */
  /* Site headings are uppercase Montserrat-style sans with heavy tracking. */
  /* Body uses a humanist sans. We use Montserrat as a near-perfect free substitute. */
  /* For an editorial / luxury accent we use Cormorant Garamond as a serif display option. */
  --font-display: 'Montserrat', 'Avenir Next', 'Helvetica Neue', Arial, sans-serif;
  --font-body:    'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  --font-serif:   'Cormorant Garamond', 'Garamond', 'Times New Roman', serif;

  /* Type scale */
  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-16: 16px;
  --fs-18: 18px;
  --fs-20: 20px;
  --fs-24: 24px;
  --fs-32: 32px;
  --fs-40: 40px;
  --fs-56: 56px;
  --fs-72: 72px;
  --fs-96: 96px;

  /* Tracking — STAJets style is WIDE on display headings */
  --track-tight:  -0.01em;
  --track-normal:  0;
  --track-wide:    0.08em;
  --track-wider:   0.18em;   /* hero headlines: "THE ULTIMATE IN PRIVATE TRAVEL" */
  --track-widest:  0.32em;   /* logo-style nav labels: "C H A R T E R" */

  /* Line heights */
  --lh-tight:   1.05;
  --lh-snug:    1.2;
  --lh-normal:  1.5;
  --lh-relaxed: 1.7;

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

  /* ---------- RADII ---------- */
  --radius-0: 0;          /* default — STAJets is mostly square / sharp */
  --radius-1: 2px;
  --radius-2: 4px;
  --radius-pill: 999px;

  /* ---------- SHADOWS ---------- */
  --shadow-1: 0 1px 2px rgba(14,16,20,0.06), 0 1px 1px rgba(14,16,20,0.04);
  --shadow-2: 0 6px 16px rgba(14,16,20,0.08);
  --shadow-3: 0 18px 48px rgba(14,16,20,0.16);
  --shadow-press: inset 0 1px 2px rgba(14,16,20,0.18);

  /* ---------- MOTION ---------- */
  --ease-standard: cubic-bezier(.2,.6,.2,1);
  --ease-emph: cubic-bezier(.2,.8,.2,1);
  --dur-fast: 160ms;
  --dur-base: 240ms;
  --dur-slow: 480ms;
}

/* ---------- SEMANTIC TYPE STYLES ---------- */

.sta-eyebrow {
  font-family: var(--font-display);
  font-size: var(--fs-12);
  font-weight: 500;
  letter-spacing: var(--track-widest);
  text-transform: uppercase;
  color: var(--fg-3);
}

.sta-h1, h1.sta {
  font-family: var(--font-display);
  font-size: var(--fs-72);
  font-weight: 300;            /* hero headlines are LIGHT weight, wide-tracked */
  letter-spacing: var(--track-wider);
  line-height: var(--lh-tight);
  text-transform: uppercase;
  color: var(--fg-1);
  margin: 0;
}

.sta-h2, h2.sta {
  font-family: var(--font-display);
  font-size: var(--fs-40);
  font-weight: 400;
  letter-spacing: var(--track-wide);
  line-height: var(--lh-snug);
  text-transform: uppercase;
  color: var(--fg-1);
  margin: 0;
}

.sta-h3, h3.sta {
  font-family: var(--font-display);
  font-size: var(--fs-24);
  font-weight: 500;
  letter-spacing: var(--track-wide);
  line-height: var(--lh-snug);
  text-transform: uppercase;
  color: var(--fg-1);
  margin: 0;
}

.sta-h4, h4.sta {
  font-family: var(--font-display);
  font-size: var(--fs-18);
  font-weight: 600;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--fg-1);
  margin: 0;
}

.sta-display-serif {
  font-family: var(--font-serif);
  font-size: var(--fs-56);
  font-weight: 400;
  font-style: italic;
  letter-spacing: var(--track-tight);
  line-height: var(--lh-tight);
  color: var(--fg-1);
}

.sta-lede, p.sta-lede {
  font-family: var(--font-body);
  font-size: var(--fs-20);
  font-weight: 300;
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
}

.sta-body, p.sta {
  font-family: var(--font-body);
  font-size: var(--fs-16);
  font-weight: 400;
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
}

.sta-small {
  font-family: var(--font-body);
  font-size: var(--fs-13);
  font-weight: 400;
  line-height: var(--lh-normal);
  color: var(--fg-3);
}

.sta-mono, code.sta {
  font-family: 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;
  font-size: var(--fs-13);
  letter-spacing: 0;
  color: var(--fg-1);
}

.sta-link {
  font-family: var(--font-display);
  font-size: var(--fs-13);
  font-weight: 500;
  letter-spacing: var(--track-widest);
  text-transform: uppercase;
  color: var(--fg-1);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  transition: opacity var(--dur-fast) var(--ease-standard);
}
.sta-link:hover { opacity: 0.6; }