/* ============================================================
   AVIATOOLS.AI — Design Tokens (Cal.com system)
   tokens.css · v3.0
   ============================================================ */

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

:root {
  /* ── Core palette (Cal.com-derived) ── */
  --ink:            #111111;
  --ink-active:     #242424;
  --body:           #374151;
  --muted:          #6b7280;
  --muted-soft:     #898989;
  --hairline:       #e5e7eb;
  --hairline-soft:  #f3f4f6;
  --canvas:         #ffffff;
  --surface-soft:   #f8f9fa;
  --surface-card:   #f5f5f5;
  --surface-strong: #e5e7eb;
  --surface-dark:   #101010;
  --surface-dark-e: #1a1a1a;

  /* ── Brand gold (kept as aviation accent only) ── */
  --gold:           #b8941e;
  --gold-light:     #d4a820;
  --gold-faint:     rgba(184,148,30,0.08);
  --gold-border:    rgba(184,148,30,0.25);

  /* ── Semantic ── */
  --on-primary:     #ffffff;
  --on-dark:        #ffffff;
  --on-dark-soft:   #a1a1aa;
  --badge-blue:     #3b82f6;
  --badge-green:    #10b981;
  --badge-orange:   #fb923c;
  --badge-violet:   #8b5cf6;

  /* ── Typography ── */
  --display: 'Inter', system-ui, sans-serif;  /* Cal Sans fallback */
  --sans:    'Inter', system-ui, sans-serif;
  --mono:    'JetBrains Mono', 'Fira Code', ui-monospace, monospace;

  /* ── Spacing ── */
  --sp-xs:   8px;
  --sp-sm:   12px;
  --sp-md:   16px;
  --sp-lg:   24px;
  --sp-xl:   32px;
  --sp-xxl:  48px;
  --sp-sec:  96px;

  /* ── Radius (Cal.com scale) ── */
  --r-xs:    4px;
  --r-sm:    6px;
  --r-md:    8px;
  --r-lg:    12px;
  --r-xl:    16px;
  --r-pill:  9999px;

  /* ── Shadows ── */
  --shadow-xs:  0 1px 2px rgba(0,0,0,0.05);
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06);
  --shadow-md:  0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);
  --shadow-lg:  0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
  --shadow-xl:  0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04);

  /* ── Layout ── */
  --max:    1200px;
  --nav-h:  64px;
  --gutter: 24px;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }
body {
  background: var(--canvas);
  color: var(--body);
  font-family: var(--sans);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; font-family: inherit; }

/* ── Layout helpers ── */
.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap;
}
section { padding: var(--sp-sec) 0; }

/* ── Typography scale ── */
.display-xl {
  font-family: var(--display);
  font-size: clamp(40px, 5.5vw, 64px);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -2px;
  color: var(--ink);
}
.display-lg {
  font-family: var(--display);
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -1.5px;
  color: var(--ink);
}
.display-md {
  font-family: var(--display);
  font-size: clamp(26px, 3vw, 36px);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -1px;
  color: var(--ink);
}
.display-sm {
  font-family: var(--display);
  font-size: clamp(22px, 2.5vw, 28px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.5px;
  color: var(--ink);
}
.title-lg  { font-size: 22px; font-weight: 600; line-height: 1.3; letter-spacing: -0.3px; color: var(--ink); }
.title-md  { font-size: 18px; font-weight: 600; line-height: 1.4; color: var(--ink); }
.title-sm  { font-size: 16px; font-weight: 600; line-height: 1.4; color: var(--ink); }
.body-md   { font-size: 16px; font-weight: 400; line-height: 1.6; color: var(--body); }
.body-sm   { font-size: 14px; font-weight: 400; line-height: 1.6; color: var(--body); }
.caption   { font-size: 13px; font-weight: 500; line-height: 1.4; color: var(--muted); }
.eyebrow   {
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted);
}

/* ── Hairline divider ── */
.divider { width: 100%; height: 1px; background: var(--hairline); }

/* ── Buttons ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  font-family: var(--sans);
  font-size: 14px; font-weight: 600;
  line-height: 1;
  padding: 10px 20px;
  height: 40px;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  transition: background .15s, border-color .15s, color .15s;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
}
.btn-primary {
  background: var(--ink);
  color: var(--on-primary);
  border-color: var(--ink);
}
.btn-primary:hover { background: var(--ink-active); border-color: var(--ink-active); }
.btn-secondary {
  background: var(--canvas);
  color: var(--ink);
  border-color: var(--hairline);
}
.btn-secondary:hover { border-color: var(--ink); }
.btn-lg { height: 48px; padding: 13px 28px; font-size: 15px; }

/* ── Badge pill ── */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; font-weight: 500;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: var(--surface-card);
  color: var(--muted);
  white-space: nowrap;
}
.badge-dark { background: var(--ink); color: var(--on-primary); }
.badge-gold { background: var(--gold-faint); color: var(--gold); border: 1px solid var(--gold-border); }
.badge-blue { background: rgba(59,130,246,0.1); color: var(--badge-blue); }
.badge-green { background: rgba(16,185,129,0.1); color: var(--badge-green); }
.badge-violet { background: rgba(139,92,246,0.1); color: var(--badge-violet); }
.badge-orange { background: rgba(251,146,60,0.1); color: var(--badge-orange); }

/* ── Section header ── */
.section-header { margin-bottom: var(--sp-xxl); }
.section-header .eyebrow { margin-bottom: var(--sp-sm); }
.section-header .section-h2 {
  font-family: var(--display);
  font-size: clamp(28px, 3.5vw, 42px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -1.2px;
  color: var(--ink);
  margin-bottom: var(--sp-md);
}
.section-header .section-sub {
  font-size: 17px;
  color: var(--muted);
  max-width: 580px;
  line-height: 1.65;
}

/* ── Responsive ── */
@media (max-width: 768px) {
  :root { --gutter: 20px; --sp-sec: 64px; }
}
@media (max-width: 480px) {
  :root { --gutter: 16px; --sp-sec: 48px; }
}