/* Bontile Bookkeeping — design tokens. Source of truth: design-system/MASTER.md
   Brand colors sampled from the logo: orange-red #FF3B00, royal blue #003DD5. */
:root {
  /* Color — brand blue */
  --navy-950: #061238;   /* hero, dark bands, footer */
  --navy-900: #0A1A4F;   /* headings on light */
  --navy-800: #0E2370;   /* dark cards, dark hover */
  --blue-700: #003DD5;   /* BRAND BLUE: primary buttons, links, focus */
  --blue-800: #0033B3;   /* primary hover */
  --blue-50: #EBF0FD;    /* info tint */

  /* Color — brand orange */
  --orange-500: #FF3B00; /* BRAND ORANGE: accent CTA background (navy text only) */
  --orange-hover: #FF5A26;
  --orange-400: #FF6A3D; /* orange accents on navy (eyebrows, checks) */
  --orange-700: #C83000; /* orange text/icons on light (5.4:1) */
  --orange-50: #FFF1EB;  /* icon tiles, warm tint */

  /* Color — surfaces & text */
  --bg: #F8FAFC;
  --surface: #FFFFFF;
  --surface-alt: #EEF2F8;
  --border: #E2E8F0;
  --border-strong: #CBD5E1;
  --text: #0B1220;
  --text-muted: #475569;
  --text-on-dark: #F8FAFC;
  --text-on-dark-muted: #C7D2F0;
  --border-on-dark: rgb(255 255 255 / 0.14);

  /* Color — semantic */
  --primary: var(--blue-700);
  --primary-hover: var(--blue-800);
  --on-primary: #FFFFFF;
  --accent: var(--orange-700);
  --link: var(--blue-700);
  --ring: var(--blue-700);
  --success: #15803D;
  --success-bg: #ECFDF3;
  --danger: #B91C1C;
  --danger-bg: #FEF2F2;

  /* Typography */
  --font-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-sans: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fs-display: clamp(2.5rem, 1.6rem + 3.6vw, 4.25rem);
  --fs-h2: clamp(2rem, 1.5rem + 2vw, 2.875rem);
  --fs-h3: 1.25rem;
  --fs-lead: clamp(1.125rem, 1rem + 0.4vw, 1.3125rem);
  --fs-body: 1.0625rem;
  --fs-small: 0.875rem;
  --fs-eyebrow: 0.8125rem;

  /* Space (spacious density) */
  --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;
  --section-y: clamp(4rem, 3rem + 5vw, 8rem);

  /* Layout */
  --container: 1200px;
  --container-narrow: 760px;
  --gutter: 24px;
  --header-h: 72px;

  /* Shape */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgb(6 18 56 / 0.06);
  --shadow-md: 0 8px 24px -8px rgb(6 18 56 / 0.14);
  --shadow-lg: 0 24px 48px -16px rgb(6 18 56 / 0.28);

  /* Motion */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur-fast: 150ms;
  --dur-base: 200ms;
  --dur-reveal: 400ms;
}

@media (max-width: 480px) {
  :root { --gutter: 16px; --header-h: 64px; }
}