/* ==========================================================================
   Web Design Midland · design tokens
   Measured off the Engitech "Home 2" layout, re-expressed as custom properties.
   Every colour, font, size and spacing value used in style.css lives here.
   ========================================================================== */
:root {
  /* Colour */
  --color-ink: #1b1d21;          /* headings */
  --color-body: #6d6d6d;         /* body copy */
  --color-muted: #b5b5b5;        /* light copy on dark */
  --color-primary: #002868;      /* Texas flag blue, Pantone 281: buttons, links, ticks */
  --color-primary-dark: #00194a; /* button hover */
  --color-primary-light: #5b9dff; /* the primary where it sits on a dark background */
  --color-primary-rgb: 0, 40, 104;
  --color-primary-light-rgb: 91, 157, 255;
  --color-secondary: #bf0a30;    /* Texas flag red, Pantone 193: eyebrows, play circle, gradients */
  --color-secondary-rgb: 191, 10, 48;
  --color-secondary-light: #ff6b85; /* the red where it sits on a dark background */
  --color-navy: #141d38;         /* top bar */
  --color-dark: #211e3b;         /* dark sections, footer */
  --color-dark-2: #2b2750;
  --color-surface: #f2f2f2;
  --color-surface-alt: #f8f8f8;
  --color-line: #e4e4e4;
  --color-line-dark: rgba(255, 255, 255, 0.12);
  --color-white: #ffffff;
  --overlay-dark: rgba(20, 29, 56, 0.72);
  --overlay-primary: rgba(0, 40, 104, 0.7);

  /* Type */
  --font-heading: "Montserrat", system-ui, sans-serif;
  --font-body: "Nunito Sans", system-ui, sans-serif;
  --text-xs: 0.8125rem;   /* 13 */
  --text-sm: 0.875rem;    /* 14 */
  --text-base: 1rem;      /* 16 */
  --text-md: 1.125rem;    /* 18 */
  --text-lg: 1.5rem;      /* 24 */
  --text-xl: 2.25rem;     /* 36  section headings */
  --text-2xl: clamp(2.75rem, 5.5vw, 4.5rem);  /* 44 to 72  hero */
  --leading-tight: 1.1;
  --leading-heading: 1.33;
  --leading-body: 1.75;
  --weight-regular: 400;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-extrabold: 800;
  --weight-black: 900;
  --tracking-caps: 0.06em;

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.5rem;
  --space-8: 3.5rem;
  --space-9: 5rem;
  --section-y: clamp(4rem, 8vw, 7.5rem);
  --gutter: 1rem;

  /* Layout */
  --container: 73.125rem;  /* 1170 */
  --topbar-h: 2.5625rem;   /* 41 */
  --header-h: 6.25rem;     /* 100 */
  --radius: 0;
  --radius-sm: 0.25rem;
  --radius-pill: 999px;
  --shadow-card: 0 10px 40px rgba(0, 0, 0, 0.08);
  --shadow-card-hover: 0 20px 50px rgba(0, 0, 0, 0.14);
  --shadow-image: 0 25px 60px rgba(20, 29, 56, 0.22);

  /* Motion */
  --ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --duration: 0.3s;
  --duration-slow: 0.6s;
}

/* Phone: the two smallest text steps one notch larger (labels, eyebrows, buttons) */
@media (max-width: 768px) {
  :root {
    --text-xs: 0.875rem;   /* 14 */
    --text-sm: 0.9375rem;  /* 15 */
  }
}