/* WA-B / SKES Ghana design tokens — THE SOURCE FILE.
 *
 * Brand colours, fonts and the gold signature line, defined once for both
 * sites. Do not edit the copies (public/tokens.css, skesghana-landing/tokens.css):
 * edit this file, then run
 *
 *     bash tools/sync-design-tokens.sh
 *
 * and commit the copies with it. CI fails if a copy drifts from this file, and
 * the deploy job ships skesghana-landing/ (with its copy) to /var/www/skesghana.
 *
 * Layout tokens that differ per site (max width, gutters, radii, shadows) stay
 * in each site's own styles.css.
 *
 * Dark mode is written twice on purpose, with identical values
 * (test/designTokens.test.js enforces that):
 *   - [data-theme="dark"]: the WA-B site, where theme.js sets data-theme from
 *     the device setting or a stored choice (pages ship data-theme="light" so
 *     a visitor without JavaScript keeps the light theme its logo rules expect);
 *   - :root:not([data-theme]) under prefers-color-scheme: pages that never set
 *     data-theme at all, i.e. the SKES Ghana landing page.
 */

:root {
  /* Accent — signal blue */
  --accent: #1552c4;
  --accent-ink: #0f3d8c;
  --accent-soft: #edf3fe;
  --accent-glow: rgba(21, 82, 196, 0.16);
  /* Accent used as TEXT. The brand blue reads on light surfaces; on the dark
     theme it is only ~2.6:1, so dark lifts it. */
  --accent-text: #1552c4;
  /* Gold on the inverted ink surfaces (CTA banner, featured plan, trust band,
     dashboard toast): bright gold on navy in light mode, deep gold on the
     light card those surfaces become in dark mode. */
  --gold-on-ink: #c8a144;

  /* Gold — the one hairline highlight, never a button fill */
  --gold: #c8a144;
  --gold-ink: #7f6118;
  --gold-soft: rgba(200, 161, 68, 0.14);

  /* Neutrals — white ground, navy ink */
  --ink: #0f1b33;
  --ink-2: #1b2c4e;
  --ink-3: #4a5876;
  --muted: #4a5876;
  --muted-2: #58678a;
  --line: #edf1f8;
  --line-2: #dce3f0;
  --bg: #edf1f8;
  --bg-2: #f2f5fa;
  --bg-3: #e8edf6;
  --bg-off: #fafbfe;
  --paper: #ffffff;

  /* Semantic */
  --success: #0e7a52;
  --success-soft: #e8f6f0;
  --warning: #7f6118;
  --warning-soft: #fbf2de;
  --danger: #b23a2b;
  --danger-soft: #fcecea;

  /* WhatsApp chat surface */
  --wa-bg: #e6dcce;
  --wa-out: #d9fdd3;
  --wa-in: #ffffff;

  /* Type — Geist throughout, no serif display face */
  --font-sans: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Helvetica Neue', sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, 'SF Mono', monospace;
  --font-display: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Helvetica Neue', sans-serif;

  /* Signature hairline — one gold line, not a multi-colour stripe */
  --kente: linear-gradient(90deg, var(--gold), var(--gold));

  /* Native controls, scrollbars and autofill follow the active theme. */
  color-scheme: light;
}

[data-theme="dark"] {
  --accent: #1552c4;
  --accent-ink: #7fa8f0;
  --accent-soft: rgba(21, 82, 196, 0.28);
  --accent-glow: rgba(21, 82, 196, 0.3);
  --accent-text: #7fa8f0;
  --gold-on-ink: #634b10;
  --gold: #e0b84e;
  --gold-ink: #e0b84e;
  --gold-soft: rgba(200, 161, 68, 0.18);
  --ink: #eaf0fa;
  --ink-2: #dbe2f0;
  --ink-3: #96a6c6;
  --muted: #96a6c6;
  --muted-2: #8a9bbb;
  --line: #1c2942;
  --line-2: #1c2942;
  --bg: #0b1220;
  --bg-2: #0f1829;
  --bg-3: #16233b;
  --bg-off: #0f1829;
  --paper: #0f1829;
  --success: #2fbe86;
  --success-soft: rgba(47, 190, 134, 0.16);
  --warning: #e0b84e;
  --warning-soft: rgba(200, 161, 68, 0.18);
  --danger: #e88c7d;
  --danger-soft: rgba(214, 90, 72, 0.18);
  --wa-bg: #0b1014;
  --wa-out: #0f3d8c;
  --wa-in: #16233b;
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --accent: #1552c4;
    --accent-ink: #7fa8f0;
    --accent-soft: rgba(21, 82, 196, 0.28);
    --accent-glow: rgba(21, 82, 196, 0.3);
    --accent-text: #7fa8f0;
    --gold-on-ink: #634b10;
    --gold: #e0b84e;
    --gold-ink: #e0b84e;
    --gold-soft: rgba(200, 161, 68, 0.18);
    --ink: #eaf0fa;
    --ink-2: #dbe2f0;
    --ink-3: #96a6c6;
    --muted: #96a6c6;
    --muted-2: #8a9bbb;
    --line: #1c2942;
    --line-2: #1c2942;
    --bg: #0b1220;
    --bg-2: #0f1829;
    --bg-3: #16233b;
    --bg-off: #0f1829;
    --paper: #0f1829;
    --success: #2fbe86;
    --success-soft: rgba(47, 190, 134, 0.16);
    --warning: #e0b84e;
    --warning-soft: rgba(200, 161, 68, 0.18);
    --danger: #e88c7d;
    --danger-soft: rgba(214, 90, 72, 0.18);
    --wa-bg: #0b1014;
    --wa-out: #0f3d8c;
    --wa-in: #16233b;
    color-scheme: dark;
  }
}