/**
 * tokens.css
 * WeConnect 2.0 — Global Design Tokens & Base Styles
 *
 * Only includes:
 *   - CSS custom properties
 *   - Base reset
 *   - Typography utility classes
 *   - Layout helpers
 *   - Spacing utilities
 *   - Button system
 *   - Accessibility
 *
 * Everything component-specific lives in its own component CSS file.
 */

/* ============================================================
   RESET
   ============================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ============================================================
   DESIGN TOKENS
   ============================================================ */
:root {
  /* ── Colour palette ── */
  --red-dark:   #450A0A;
  --azuki:      #891515;
  --red-mid:    #BB2025;
  --red-bright: #E1242A;
  --salmon:     #F58C84;
  --blush:      #FFF5F4;
  --grey-light: #EDEDF0;
  --grey-bg:    #FAFAFA;
  --body-text:  #5C5F66;
  --dark:       #343840;
  --white:      #ffffff;

  /* ── Spacing scale ── */
  --sp-xs:  8px;
  --sp-sm:  16px;
  --sp-md:  24px;
  --sp-lg:  40px;
  --sp-xl:  64px;
  --sp-xxl: 96px;

  /* ── Layout widths ── */
  --w-content: 960px;
  --w-wide:    1200px;

  /* ── Fluid type scale ── */
  --t-hero:  clamp(32px, 5vw,   56px);
  --t-h1:    clamp(24px, 3.5vw, 40px);
  --t-h2:    clamp(20px, 2.8vw, 28px);
  --t-h3:    clamp(16px, 2vw,   20px);
  --t-body:  clamp(14px, 1.2vw, 16px);
  --t-small: clamp(11px, 1vw,   13px);
  --t-micro: clamp(9px,  .8vw,  11px);
}

/* ── Responsive spacing overrides ── */
@media (max-width: 768px) {
  :root {
    --sp-md:  16px;
    --sp-lg:  28px;
    --sp-xl:  48px;
    --sp-xxl: 64px;
  }
}

@media (max-width: 480px) {
  :root {
    --sp-md: 14px;
    --sp-lg: 20px;
    --sp-xl: 32px;
  }
}

/* ============================================================
   BASE
   ============================================================ */
html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Montserrat', sans-serif;
  color: var(--dark);
  font-size: var(--t-body);
  line-height: 1.65;
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

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

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

/* ============================================================
   LAYOUT
   ============================================================ */
.wec-container {
  width: 100%;
  max-width: var(--w-content);
  margin: 0 auto;
  padding: 0 var(--sp-md);
}

.container-wide {
  width: 100%;
  max-width: var(--w-wide);
  margin: 0 auto;
  padding: 0 var(--sp-md);
}

.section {
  padding: var(--sp-xl) 0;
}

.section-tight {
  padding: var(--sp-lg) 0;
}

.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-md);
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-md);
}

@media (max-width: 768px) {
  .grid-2,
  .grid-3 {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   TYPOGRAPHY UTILITIES
   ============================================================ */
.t-h1 {
  font-family: 'Montserrat', sans-serif;
  font-size: var(--t-h1);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--dark);
}

.t-h2 {
  font-family: 'Montserrat', sans-serif;
  font-size: var(--t-h2);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--dark);
}

.t-h3 {
  font-family: 'Montserrat', sans-serif;
  font-size: var(--t-h3);
  font-weight: 700;
  line-height: 1.3;
  color: var(--dark);
}

.t-eyebrow {
  font-family: 'Montserrat', sans-serif;
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--red-mid);
}

.t-body {
  font-size: var(--t-body);
  color: var(--body-text);
  line-height: 1.7;
  font-weight: 400;
}

.t-small {
  font-size: var(--t-small);
  color: var(--body-text);
  line-height: 1.55;
}

.t-warm {
  font-family: 'Playfair Display', serif;
  font-size: clamp(16px, 2vw, 22px);
  font-weight: 700;
  font-style: italic;
  color: var(--dark);
  line-height: 1.55;
}

.t-stat {
  font-family: 'Playfair Display', serif;
  font-size: clamp(22px, 3vw, 36px);
  font-weight: 900;
  color: var(--red-mid);
  line-height: 1;
}

.t-quote {
  font-family: 'Playfair Display', serif;
  font-size: clamp(18px, 2.5vw, 26px);
  font-weight: 700;
  font-style: italic;
  color: var(--dark);
  line-height: 1.5;
}

.sec-label {
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--red-mid);
  margin-bottom: var(--sp-sm);
  display: flex;
  align-items: center;
  gap: 12px;
}

.sec-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--grey-light);
}

/* ============================================================
   SPACING UTILITIES
   ============================================================ */
.text-center { text-align: center; }

.mb-xs { margin-bottom: var(--sp-xs); }
.mb-sm { margin-bottom: var(--sp-sm); }
.mb-md { margin-bottom: var(--sp-md); }
.mb-lg { margin-bottom: var(--sp-lg); }

.mt-sm { margin-top: var(--sp-sm); }
.mt-md { margin-top: var(--sp-md); }

/* ============================================================
   ACCESSIBILITY
   ============================================================ */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
   BUTTON SYSTEM
   ============================================================ */
.btn-fill {
  display: inline-block;
  font-family: 'Montserrat', sans-serif;
  background: var(--red-bright);
  color: var(--white);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 14px 28px;
  border-radius: 4px;
  text-decoration: none;
  transition: background 0.2s;
  border: none;
  cursor: pointer;
  text-align: center;
}

.btn-fill:hover { background: var(--red-mid); }

.btn-ghost {
  display: inline-block;
  font-family: 'Montserrat', sans-serif;
  border: 1.5px solid var(--red-mid);
  color: var(--red-mid);
  background: transparent;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 13px 28px;
  border-radius: 4px;
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
  cursor: pointer;
  text-align: center;
}

.btn-ghost:hover {
  background: var(--red-mid);
  color: var(--white);
}

.btn-text-link {
  font-size: var(--t-body);
  font-weight: 600;
  color: var(--red-mid);
  text-decoration: none;
  transition: color 0.2s;
}

.btn-text-link:hover { color: var(--red-bright); }

.btn-hero-primary {
  background: var(--white);
  color: var(--red-dark);
}

.btn-hero-primary:hover {
  background: var(--salmon);
  color: var(--red-dark);
}
/* ============================================================
   STICKY NAV CHIP ISSUE FIX
   ============================================================ */
div:has(> .content-nav) {
  display: contents;
}