/* Mantis Digital design tokens (v3).
   Colors were measured from screenshots of the live website (2026-10-04, +-2 units).
   Official codes must be confirmed by the owner; change them here only.

   v3 change: there is NO page-level theme and NO colour cross-fade. Every section owns its
   theme through data-theme="light|tint|dark" on the section element, so text and background
   always change together and a half-faded, low-contrast state can never be on screen. */
:root {
  /* brand */
  --brand: #00C200;
  --dark: #004100;
  --dark-card-from: #004100;
  --dark-card-to: #005500;
  --link: #004100;
  --muted: #4E7447;
  --text: #000000;
  --bg: #FBFEFB;
  --tint: #E3F4E0;
  --border: #C9EEC3;
  --pill: #E5F7E3;
  --on-dark-text: #DBE4DA;
  --whatsapp: #25D366;              /* only the WhatsApp icon and the floating pill */
  --accent-large-on-light: #005500; /* large accent text on light/tint (4.07:1); #00C200 is only 2.3:1 there */

  /* shape and space */
  --radius-card: 24px;
  --radius-button: 14px;
  --radius-pill: 999px;
  --radius-sheet: 28px;             /* top corners of a section sheet (40px from 1024 px) */
  --gutter: 20px;
  --max-width: 1120px;
  --header-height: 60px;            /* 64px from 768 px, 68px from 1024 px */
  --scroll-offset: 72px;
  --rail-width: clamp(220px, 24vw, 340px);

  /* vertical rhythm (the spec forbids empty bands taller than the section padding) */
  --space-section-top: 52px;        /* mobile; 72px from 768 px, 88px from 1024 px */
  --space-section-bottom: 60px;     /* mobile; 80px from 768 px, 96px from 1024 px */
  --space-block: 24px;              /* between blocks inside a section */

  /* motion */
  --dur-fast: 150ms;
  --dur-base: 300ms;
  --dur-medium: 500ms;
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --word-step: 34ms;                /* stagger between the words of a spoken line */
}

/* Section themes. Components read only these semantic variables. */
:root,
[data-theme="light"] {
  --page-bg: var(--bg);
  --page-text: var(--text);
  --page-muted: var(--muted);
  --card-bg: #FFFFFF;
  --card-border: var(--border);
  --pill-bg: var(--pill);
  --accent-text: var(--accent-large-on-light);
  --focus: var(--link);
}
[data-theme="tint"] {
  --page-bg: var(--tint);
  --page-text: var(--text);
  --page-muted: #41683A;
  --card-bg: #FFFFFF;
  --card-border: #BFE6B8;
  --pill-bg: #FFFFFF;
  --accent-text: var(--accent-large-on-light);
  --focus: var(--link);
}
[data-theme="dark"] {
  --page-bg: var(--dark);
  --page-text: #FFFFFF;
  --page-muted: var(--on-dark-text);
  --card-bg: rgba(255, 255, 255, 0.07);
  --card-border: rgba(255, 255, 255, 0.18);
  --pill-bg: rgba(255, 255, 255, 0.1);
  --accent-text: var(--brand);
  --focus: #BFE7B3;
}
[data-theme] {
  background-color: var(--page-bg);
  color: var(--page-text);
}

@media (min-width: 768px) {
  :root { --header-height: 64px; --gutter: 32px; --space-section-top: 72px; --space-section-bottom: 80px; --space-block: 28px; }
}
@media (min-width: 1024px) {
  :root { --header-height: 68px; --radius-sheet: 40px; --space-section-top: 88px; --space-section-bottom: 96px; --space-block: 32px; }
}