/* Fly By Media — design tokens (consolidated from the brand design system).
 * Colors, layout, typography + a minimal element base. The page markup mostly
 * uses literal hex values lifted from the design references; these variables
 * back the fonts, headings and shared utilities. */

@import url("https://fonts.googleapis.com/css2?family=Baloo+2:wght@400;500;600;700;800&family=Nunito+Sans:opsz,wght@6..12,400;6..12,500;6..12,600;6..12,700;6..12,800&family=Spline+Sans+Mono:wght@400;500;600&display=swap");

:root {
  /* ---- Brand: Brick Red (primary) ---- */
  --red-50:#fbf1f0; --red-100:#f6dedc; --red-200:#eab9b5; --red-300:#db8b85;
  --red-400:#c85852; --red-500:#b02f2b; --red-600:#901010; --red-700:#7a0e0e;
  --red-800:#5c0b0b; --red-900:#3f0808;

  /* ---- Brand: Terracotta Orange (accent) ---- */
  --orange-50:#fdf1e9; --orange-100:#fbe0cd; --orange-200:#f5bd97; --orange-300:#ef9b64;
  --orange-400:#ea7d3c; --orange-500:#e06020; --orange-600:#c44e17; --orange-700:#a03d12; --orange-800:#7a2f0f;

  /* ---- Warm neutrals: Sand / Clay / Ink ---- */
  --sand-50:#faf6f0; --sand-100:#f4ece0; --sand-200:#e9dcc9; --sand-300:#d9c6ab;
  --sand-400:#c2a983; --clay-500:#a4885f; --clay-600:#816a48; --brown-700:#5f4a35;
  --ink-800:#38291f; --ink-900:#241a13; --white:#ffffff;

  /* ---- Semantic aliases ---- */
  --brand:var(--red-600); --brand-hover:var(--red-700); --brand-active:var(--red-800);
  --accent:var(--orange-500); --accent-hover:var(--orange-600);
  --surface-page:var(--sand-50); --surface-card:var(--white); --surface-sunken:var(--sand-100);
  --surface-inverse:var(--ink-900);
  --text-strong:var(--ink-900); --text-body:var(--ink-800); --text-muted:var(--clay-600); --text-subtle:var(--clay-500);
  --text-link:var(--red-600); --text-link-hover:var(--orange-500);
  --border-subtle:var(--sand-200); --border-default:var(--sand-300); --border-strong:var(--clay-500);

  /* ---- Typography ---- */
  --font-display:"Baloo 2","Nunito Sans",system-ui,sans-serif;
  --font-body:"Nunito Sans",system-ui,-apple-system,sans-serif;
  --font-mono:"Spline Sans Mono",ui-monospace,"SFMono-Regular",monospace;

  /* ---- Layout / radius / shadow / motion ---- */
  --container-max:1200px; --header-height:76px;
  --radius-sm:6px; --radius-md:10px; --radius-lg:16px; --radius-xl:24px; --radius-pill:999px;
  --shadow-xs:0 1px 2px rgba(63,8,8,0.06); --shadow-sm:0 2px 6px rgba(63,8,8,0.08);
  --shadow-md:0 8px 20px rgba(63,8,8,0.10); --shadow-lg:0 18px 40px rgba(63,8,8,0.14);
  --shadow-brand:0 10px 26px rgba(144,16,16,0.28);
  --ease-out:cubic-bezier(0.22,1,0.36,1);
  --dur-fast:140ms; --dur-base:220ms; --dur-slow:380ms;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--text-strong);
}

a { color: var(--text-link); text-decoration: none; transition: color var(--dur-fast) var(--ease-out); }
a:hover { color: var(--text-link-hover); }