/* =========================================================
   TOP LINES — Palette / surface tokens

   The page uses the theme's bright neutral surfaces (#f6f6f6 /
   #eee), matching the live site. A warmer stone-toned set was
   trialled and read as dim, so these tokens keep the bright
   values and simply give every section a single source of truth
   instead of the colours being hard-coded in a dozen places.

   Nothing here changes layout — colour only.
   ========================================================= */

:root {
  /* Ink — all ≥ 4.6:1 on the darkest surface below (#eee) */
  --tl-ink: #191919;
  --tl-ink-body: #4d4d52;
  --tl-ink-muted: #63636a;

  /* Surfaces */
  --tl-surface: #f6f6f6;
  --tl-surface-alt: #eeeeee;
  --tl-surface-card: #ffffff;
  --tl-surface-rule: rgba(25, 25, 25, 0.13);

  /* Brand */
  --tl-gold: #b58c21;
}

/* Page base */
body {
  background-color: var(--tl-surface);
}

/* The two theme utility classes that paint most sections. */
.tl-bg-color {
  background-color: var(--tl-surface);
}

.bg-grey {
  background-color: var(--tl-surface-alt);
}

/* Sections that hard-code the greys rather than using the utilities. */
.process-section,
.testimonial-section {
  background-color: var(--tl-surface-alt);
}

.service-section,
.feature-section,
.project-section,
.newsletter-section {
  background-color: var(--tl-surface);
}

/* These two set a cream (#f7f4ee) in src/styles.css, which Vite injects
   after this file — hence the extra `body` for specificity. Both sections
   are slated for removal under client comments 9-11; until then they
   match the rest of the page instead of reading warm. */
body .sponsor-section,
body .gallary-section,
body .sponsor-section + .gallary-section {
  background-color: var(--tl-surface);
}