/* All American Builders — Design Tokens
   Colors are sampled from the flag logo (assets/images/brand/logo.png).
   Confirm against a vector source if one turns up. */
:root {
  /* Brand — Flag Navy */
  --navy-900: #0F1533;
  --navy-800: #1B2352;   /* primary: header, footer, headings */
  --navy-700: #26306B;
  --navy-600: #364289;
  --navy-100: #E7E9F2;
  --navy-50:  #F3F4F9;

  /* Brand — Flag Red */
  --red-700: #8F1119;
  --red-600: #A8151F;
  --red-500: #C41E2A;    /* accent: CTAs, highlights */
  --red-50:  #FBEAEC;

  /* Neutrals */
  --white: #FFFFFF;
  --gray-50:  #F8F9FA;
  --gray-100: #F1F3F5;
  --gray-200: #E5E8EC;
  --gray-400: #A2A9B3;
  --gray-600: #6B7280;
  --gray-700: #4B5563;
  --gray-800: #2E3440;
  --gray-900: #1A1D24;

  /* Semantic */
  --color-bg: var(--white);
  --color-bg-alt: var(--gray-50);
  --color-text: var(--gray-800);
  --color-text-muted: var(--gray-600);
  --color-heading: var(--navy-800);
  --color-primary: var(--navy-800);
  --color-accent: var(--red-500);
  --color-accent-hover: var(--red-600);
  --color-border: var(--gray-200);
  --color-success: #1E8E3E;
  --color-error: #C4281C;

  /* Type */
  --font-heading: "Oswald", "Arial Narrow", Impact, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: clamp(1.15rem, 1rem + 0.5vw, 1.35rem);
  --text-2xl: clamp(1.4rem, 1.2rem + 1vw, 1.75rem);
  --text-3xl: clamp(1.75rem, 1.4rem + 1.5vw, 2.4rem);
  --text-4xl: clamp(2.1rem, 1.6rem + 2.2vw, 3.2rem);
  --text-hero: clamp(2.4rem, 1.6rem + 4vw, 4.5rem);
  --leading-tight: 1.1;
  --leading-normal: 1.55;
  --leading-relaxed: 1.7;
  --tracking-caps: 0.08em;

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-8: 3rem;
  --space-10: 4rem;
  --space-12: 6rem;
  --section-y: clamp(3.5rem, 6vw, 6rem);
  --gutter: 1rem;
  --container: 1200px;
  --container-narrow: 820px;

  /* Misc */
  --radius-sm: 4px;
  --radius: 8px;
  --radius-lg: 14px;
  --shadow-sm: 0 1px 3px rgba(15, 21, 51, 0.10);
  --shadow: 0 6px 20px rgba(15, 21, 51, 0.12);
  --shadow-lg: 0 18px 45px rgba(15, 21, 51, 0.20);
  --transition: 180ms ease;
  --header-h: 76px;
}