/* ==========================================================================
   WaaS Design Tokens — CSS Custom Properties
   HVAC / Air Conditioning vertical colour palette
   ========================================================================== */

:root {
  /* Color palette */
  --color-navy:       #0e2240;
  --color-navy-80:    #2a3f5f;
  --color-coral:      #f05a28;
  --color-coral-dark: #c44718;
  --color-cream:      #fdf8f2;
  --color-white:      #ffffff;
  --color-gray-100:   #f3f4f6;
  --color-gray-300:   #d1d5db;
  --color-gray-600:   #4b5563;
  --color-gray-800:   #1f2937;

  /* Typography */
  --font-sans:    system-ui, -apple-system, 'Segoe UI', sans-serif;
  --text-xs:      0.75rem;
  --text-sm:      0.875rem;
  --text-base:    1rem;
  --text-lg:      1.125rem;
  --text-xl:      1.25rem;
  --text-2xl:     1.5rem;
  --text-3xl:     1.875rem;
  --text-4xl:     2.25rem;
  --text-5xl:     3rem;
  --fw-normal:    400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;
  --fw-extrabold: 800;
  --leading-tight:  1.15;
  --leading-snug:   1.35;
  --leading-normal: 1.6;

  /* Spacing */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* Layout */
  --container-max: 1100px;
  --container-md:  760px;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.10);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
}

/* ==========================================================================
   Global reset & base
   ========================================================================== */

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

body {
  margin: 0;
  font-family: var(--font-sans);
  background: var(--color-cream);
  color: var(--color-navy);
  line-height: var(--leading-normal);
}

img {
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

h1, h2, h3, h4, h5, h6 {
  line-height: var(--leading-tight);
  margin: 0;
}

/* ==========================================================================
   Button utilities
   ========================================================================== */

.btn {
  display: inline-block;
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  font-weight: var(--fw-semibold);
  text-decoration: none;
  transition:
    background var(--transition-fast),
    color var(--transition-fast),
    border-color var(--transition-fast);
  cursor: pointer;
  border: 2px solid transparent;
  line-height: 1.4;
}

.btn--primary {
  background: var(--color-coral);
  color: var(--color-white);
  border-color: var(--color-coral);
}

.btn--primary:hover {
  background: var(--color-coral-dark);
  border-color: var(--color-coral-dark);
  text-decoration: none;
}

.btn--outline {
  background: transparent;
  color: var(--color-white);
  border-color: var(--color-white);
}

.btn--outline:hover {
  background: var(--color-white);
  color: var(--color-navy);
  text-decoration: none;
}

.btn--navy {
  background: var(--color-navy);
  color: var(--color-white);
  border-color: var(--color-navy);
}

.btn--navy:hover {
  background: var(--color-navy-80);
  border-color: var(--color-navy-80);
  text-decoration: none;
}

/* ==========================================================================
   Container utility
   ========================================================================== */

.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-6);
}

.container--md {
  max-width: var(--container-md);
  margin: 0 auto;
  padding: 0 var(--space-6);
}