/*
  Design tokens — the ONLY place colour, type, spacing, radius, shadow,
  container and breakpoint values are defined.
  UbuntuBLD Building Construction | Durban, KwaZulu-Natal, South Africa
  Do not hard-code a colour, font, radius, shadow or spacing value
  anywhere else in the codebase — add a token here first.
*/
:root {
  /* ---- Colour (UbuntuBLD red + black palette) ---- */
  --color-white: #ffffff;
  --color-black: #111111;
  --color-black-hover: #1a1a1a;
  --color-charcoal: #1F1F1F;
  --color-bg-soft: #f5f5f5;

  --color-red: #E03C31;
  --color-red-hover: #B92D24;
  --color-accent-line: #FDB913;
  /* Full-bleed accent bands use a slightly deeper red than --color-red so
     white body text clears WCAG AA (4.83:1 here vs 4.36:1 at #E03C31). */
  --color-accent-band: #D63529;

  --color-text-body: #333333;
  --color-text-body-light: #666666;
  --color-text-on-dark: #ffffff;
  --color-text-on-dark-muted: #D9D9D9;

  --color-border-light: #E0E0E0;
  --color-border-dark: rgba(255, 255, 255, 0.12);

  --color-whatsapp: #2db742;
  --color-success: #2f7d4a;
  --color-error: #b33a3a;

  /* ---- Typography ---- */
  --font-heading: "Outfit", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Inter", "Roboto", "Helvetica Neue", Arial, sans-serif;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.75rem;
  --text-3xl: 2.25rem;
  --text-4xl: 3rem;
  --text-5xl: 4rem;

  /* Fluid heading sizes */
  --text-h1-hero: clamp(2.25rem, 5.4vw + 1rem, 4rem);
  --text-h1-inner: clamp(1.9rem, 3.4vw + 1rem, 3rem);
  --text-h2: clamp(1.6rem, 2.4vw + 1rem, 2.25rem);
  --text-h3: clamp(1.25rem, 1vw + 1rem, 1.5rem);

  /* ---- Shape ---- */
  --radius-button: 2px;
  --radius-card: 0px;
  --radius-pill: 999px;

  /* ---- Shadows ---- */
  --shadow-sm: 0 4px 18px rgba(0, 0, 0, 0.07);
  --shadow-md: 0 14px 40px rgba(0, 0, 0, 0.1);

  /* ---- Layout ---- */
  --container-content: 1180px;
  --container-wide: 1180px;
  --container-narrow: 720px;
  --page-gutter: 20px;

  /* ---- 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: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --section-padding: clamp(3.5rem, 7vw, 6rem);
  --card-gap: 8px;

  /* ---- Header ---- */
  --header-height: 80px;
  --header-height-sticky: 64px;

  /* ---- Motion ---- */
  --motion-fast: 200ms ease;
  --motion-base: 400ms ease;
  --motion-slow: 550ms ease;

  /* ---- Breakpoints (referenced in comments; media queries can't read custom properties) ---- */
  /* sm:480  md:768  lg:1024  xl:1280  2xl:1536 */
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}