/**
 * Counsel Solutions global design tokens.
 * Splash composition + black/white dominance; Poppins for Apollo-style geometric type.
 * Pricing retrieved 2026-08-06 from https://customcoding.co.za/counsel-solutions/ — confirm before launch.
 */

:root {
  /* Colour roles */
  --cs-color-text: #111111;
  --cs-color-text-muted: #555555;
  --cs-color-bg: #ffffff;
  --cs-color-bg-muted: #f5f5f5;
  --cs-color-dark: #000000;
  --cs-color-dark-alt: #111111;
  --cs-color-dark-panel: #0a0a0a;
  --cs-color-border: #e6e6e6;
  --cs-color-accent: #1bb0f9; /* Splash accent — use sparingly */
  --cs-color-on-dark: #ffffff;
  --cs-color-on-dark-muted: #b2b2b2;
  --cs-color-success: #2e7d32;
  --cs-color-error: #c62828;

  /* Typography */
  --cs-font: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --cs-fw-light: 300;
  --cs-fw-regular: 400;
  --cs-fw-medium: 500;
  --cs-fw-semibold: 600;
  --cs-fw-bold: 700;
  --cs-fw-extrabold: 800;

  --cs-text-eyebrow: clamp(0.6875rem, 0.65rem + 0.15vw, 0.75rem);
  --cs-text-body: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --cs-text-h4: clamp(1.125rem, 1.05rem + 0.35vw, 1.25rem);
  --cs-text-h3: clamp(1.375rem, 1.2rem + 0.7vw, 1.75rem);
  --cs-text-h2: clamp(1.75rem, 1.4rem + 1.4vw, 2.75rem);
  --cs-text-h1: clamp(2.25rem, 1.7rem + 2.4vw, 3.75rem);
  --cs-text-display-light: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);

  --cs-lh-tight: 1.15;
  --cs-lh-snug: 1.3;
  --cs-lh-body: 1.65;
  --cs-tracking-eyebrow: 0.4em;
  --cs-tracking-tight: -0.02em;

  /* Spacing (8px base) */
  --cs-space-1: 8px;
  --cs-space-2: 16px;
  --cs-space-3: 24px;
  --cs-space-4: 32px;
  --cs-space-5: 40px;
  --cs-space-6: 48px;
  --cs-space-7: 64px;
  --cs-space-8: 80px;
  --cs-space-9: 96px;
  --cs-section-y: clamp(48px, 6vw, 96px);
  --cs-content-width: 1120px;
  --cs-content-narrow: 720px;

  /* Shape */
  --cs-radius: 2px;
  --cs-radius-tag: 999px;
}

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  font-family: var(--cs-font);
  font-size: var(--cs-text-body);
  font-weight: var(--cs-fw-regular);
  line-height: var(--cs-lh-body);
  color: var(--cs-color-text);
  background: var(--cs-color-bg);
}

h1, h2, h3, h4, h5, h6,
.cs-h1, .cs-h2, .cs-h3, .cs-h4 {
  font-family: var(--cs-font);
  color: var(--cs-color-text);
  letter-spacing: var(--cs-tracking-tight);
}

h1, .cs-h1 {
  font-size: var(--cs-text-h1);
  font-weight: var(--cs-fw-extrabold);
  line-height: var(--cs-lh-tight);
}

h2, .cs-h2 {
  font-size: var(--cs-text-h2);
  font-weight: var(--cs-fw-bold);
  line-height: var(--cs-lh-snug);
}

h3, .cs-h3 {
  font-size: var(--cs-text-h3);
  font-weight: var(--cs-fw-semibold);
  line-height: var(--cs-lh-snug);
}

h4, .cs-h4 {
  font-size: var(--cs-text-h4);
  font-weight: var(--cs-fw-semibold);
}

.cs-eyebrow {
  display: inline-block;
  font-size: var(--cs-text-eyebrow);
  font-weight: var(--cs-fw-semibold);
  letter-spacing: var(--cs-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--cs-color-text-muted);
  margin-bottom: var(--cs-space-2);
}

.cs-display-light {
  font-size: var(--cs-text-display-light);
  font-weight: var(--cs-fw-light);
  line-height: var(--cs-lh-snug);
  color: var(--cs-color-text-muted);
}

.cs-muted {
  color: var(--cs-color-text-muted);
}

.cs-section {
  padding-block: var(--cs-section-y);
}

.cs-section--muted {
  background: var(--cs-color-bg-muted);
}

.cs-section--dark {
  background: var(--cs-color-dark);
  color: var(--cs-color-on-dark);
}

.cs-section--dark h1,
.cs-section--dark h2,
.cs-section--dark h3,
.cs-section--dark .cs-h1,
.cs-section--dark .cs-h2,
.cs-section--dark .cs-h3 {
  color: var(--cs-color-on-dark);
}

.cs-section--dark .cs-display-light,
.cs-section--dark .cs-muted,
.cs-section--dark .cs-eyebrow {
  color: var(--cs-color-on-dark-muted);
}

.cs-section--dark-alt {
  background: var(--cs-color-dark-panel);
  color: var(--cs-color-on-dark);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.cs-wrap {
  width: min(100% - 32px, var(--cs-content-width));
  margin-inline: auto;
}

.cs-wrap--narrow {
  width: min(100% - 32px, var(--cs-content-narrow));
}