/* QAH Design System — Colors & Type
   Source: QAH – Agency Website (Apple-style DS) Figma file
   Primary: #F35926 (brand/500)  ·  Type: Inter  ·  Neutrals: Apple-style grays
*/

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

:root {
  /* ─── Brand (orange) ──────────────────────────────── */
  --brand-50:  #FFF4EE;
  --brand-100: #FFE4D4;
  --brand-200: #FFB599;
  --brand-300: #FF8F66;
  --brand-400: #F7713B;
  --brand-500: #F35926;   /* ★ primary */
  --brand-600: #C44518;
  --brand-700: #8A2E10;

  /* Legacy brand tint used in badges / soft pills */
  --brand-tint-bg:  #FFF1EB;
  --brand-tint-fg:  #A83413;

  /* ─── Neutral (Apple-style) ───────────────────────── */
  --neutral-0:    #FFFFFF;
  --neutral-50:   #FBFBFD;
  --neutral-100:  #F5F5F7;
  --neutral-200:  #E5E5EA;
  --neutral-250:  #E8E8ED;   /* card borders */
  --neutral-300:  #D2D2D7;
  --neutral-400:  #AEAEB2;
  --neutral-500:  #86868B;
  --neutral-600:  #6E6E73;
  --neutral-700:  #48484A;
  --neutral-800:  #1D1D1F;
  --neutral-900:  #0A0A0C;

  /* ─── Semantic roles ──────────────────────────────── */
  --fg-1: var(--neutral-800);    /* primary text */
  --fg-2: var(--neutral-600);    /* secondary text */
  --fg-3: var(--neutral-500);    /* muted / meta */
  --fg-inverse: var(--neutral-100);
  --fg-brand: var(--brand-500);
  --fg-on-brand: #FFFFFF;

  --bg-page:     #FFFFFF;
  --bg-alt:      var(--neutral-50);    /* alternating section bg */
  --bg-subtle:   var(--neutral-100);   /* cards, chips */
  --bg-dark:     var(--neutral-800);   /* CTA, stats, footer */
  --bg-darker:   #0A0A0C;

  --border-1: var(--neutral-250);
  --border-2: var(--neutral-300);

  --success: #30A46C;
  --warning: #F0A500;
  --error:   #D93025;
  --info:    #0071E3;

  /* ─── Elevation / shadow ──────────────────────────── */
  --shadow-xs:       0 1px 0 0 rgba(0,0,0,0.04);
  --shadow-sm:       0 4px 16px 0 rgba(0,0,0,0.04);   /* card base */
  --shadow-md:       0 8px 16px rgba(0,0,0,0.08);
  --shadow-lg:       0 16px 32px rgba(0,0,0,0.12);
  --shadow-xl:       0 24px 48px rgba(0,0,0,0.16);
  --shadow-brand-sm: 0 8px 20px -4px rgba(243,89,38,0.30);
  --shadow-brand-md: 0 12px 28px -6px rgba(243,89,38,0.35);
  --shadow-brand-lg: 0 20px 40px -8px rgba(243,89,38,0.40);

  /* ─── Radius ──────────────────────────────────────── */
  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  14px;
  --radius-xl:  18px;
  --radius-2xl: 24px;
  --radius-3xl: 32px;
  --radius-pill: 9999px;

  /* ─── Spacing (4px base unit) ─────────────────────── */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-7:   32px;
  --space-8:   48px;
  --space-9:   64px;
  --space-10:  80px;
  --space-11:  120px;

  /* ─── Layout ──────────────────────────────────────── */
  --container:       1200px;
  --page-gutter:     120px;   /* desktop horizontal padding */
  --page-gutter-md:  48px;
  --page-gutter-sm:  20px;
  --section-y:       80px;
  --section-y-lg:    120px;

  /* ─── Typography (base + semantic) ────────────────── */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Semantic type tokens — each as one-shorthand var for `font:` */
  --t-hero:      700 72px/1.04 var(--font-sans); /* letter-spacing -3px  */
  --t-h1:        700 56px/1.04 var(--font-sans); /* -2.4px */
  --t-h2:        700 40px/1.10 var(--font-sans); /* -1.8px */
  --t-h3:        600 28px/1.25 var(--font-sans); /* -0.8px */
  --t-h4:        600 22px/1.30 var(--font-sans); /* -0.5px */
  --t-h5:        600 20px/1.30 var(--font-sans); /* -0.4px */
  --t-body-lg:   400 19px/1.58 var(--font-sans);
  --t-body:      400 16px/1.60 var(--font-sans);
  --t-body-sm:   400 14px/1.55 var(--font-sans);
  --t-caption:   500 13px/1.40 var(--font-sans); /* +1 tracking     */
  --t-eyebrow:   600 12px/1.30 var(--font-sans); /* +1.5 tracking, uppercase */
}

/* ─── Base / resets ─────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font: var(--t-body);
  color: var(--fg-1);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ─── Semantic element styles ───────────────────────── */
h1, .h1 {
  font: var(--t-h1);
  letter-spacing: -2px;
  color: var(--fg-1);
  margin: 0;
  text-wrap: balance;
}
h2, .h2 {
  font: var(--t-h2);
  letter-spacing: -1.4px;
  color: var(--fg-1);
  margin: 0;
  text-wrap: balance;
}
h3, .h3 {
  font: var(--t-h3);
  letter-spacing: -0.8px;
  color: var(--fg-1);
  margin: 0;
}
h4, .h4 {
  font: var(--t-h4);
  letter-spacing: -0.5px;
  color: var(--fg-1);
  margin: 0;
}
h5, .h5 {
  font: var(--t-h5);
  letter-spacing: -0.4px;
  color: var(--fg-1);
  margin: 0;
}
p  { font: var(--t-body); color: var(--fg-2); margin: 0; text-wrap: pretty; }
.lead { font: var(--t-body-lg); color: var(--fg-2); letter-spacing: -0.2px; }
.caption { font: var(--t-caption); letter-spacing: 0.4px; color: var(--fg-3); }
.eyebrow {
  font: var(--t-eyebrow);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--brand-500);
}
.eyebrow--muted { color: var(--fg-3); }

a {
  color: var(--brand-500);
  text-decoration: none;
  transition: opacity 120ms ease;
}
a:hover { opacity: .8; }

.hero-type {
  font: var(--t-hero);
  letter-spacing: -3px;
  color: var(--fg-1);
  text-wrap: balance;
}