/**
 * Africa Gateway tokens.
 * Colors taken from the logo: AFRICA green, GATEWAY red, globe blue.
 * Surfaces stay light so the wordmark sits on a near-white field.
 */

:root {
  /* --- palette --- */
  --ink: #12181c;
  --ink-soft: #2a343a;
  --sand: #f3f6f4;
  --sand-deep: #e3ebe6;
  --paper: #ffffff;
  --brand: #168a3a;
  --brand-deep: #0e6428;
  --amber: #d61f26;
  --gold: #c08a2e;
  --line: #d5e2da;
  --white: #ffffff;

  /* --- semantic (shared across ag-*.css) --- */
  --color-bg: var(--sand);
  --color-surface: var(--paper);
  --color-card: var(--paper);
  --color-ink: var(--ink);
  --color-ink-soft: var(--ink-soft);
  --color-primary: var(--brand);
  --color-primary-700: var(--brand-deep);
  --color-primary-300: #3c9a58;
  /* Accent = logo red (GATEWAY). Primary CTAs stay logo green. */
  --color-accent: var(--amber);
  --color-accent-700: #a8161c;
  --color-blue: #1e4b9c;
  --color-blue-300: #4d74c4;
  --color-gold: var(--gold);
  --color-line: var(--line);
  --color-line-invert: rgba(241, 239, 228, 0.18);
  --color-on-dark: var(--sand);
  --color-cream-100: var(--sand);

  /* --- type --- */
  --font-body: 'IBM Plex Sans', -apple-system, sans-serif;
  --font-display: var(--font-body);
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;

  /* --- scale --- */
  --space-1: 0.4rem;
  --space-2: 0.8rem;
  --space-3: 1.2rem;
  --space-4: 1.6rem;
  --space-5: 2.4rem;
  --space-6: 3.6rem;
  --space-7: 5.6rem;
  --space-8: 8.8rem;

  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 4px;
  --radius-pill: 20px;

  --shadow-soft: 0 12px 30px -12px rgba(18, 24, 28, 0.18);
  --shadow-lift: 0 12px 30px -12px rgba(18, 24, 28, 0.25);

  --content-width: 90%;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* Bridge → shared-shell / TI remaps */
  --ag-color-primary: var(--color-primary);
  --ag-color-primary-hover: var(--color-primary-700);
  --ag-color-primary-soft: color-mix(in srgb, var(--color-primary) 10%, #fff);
  --ag-color-primary-muted: var(--color-primary-300);
  --ag-color-accent: var(--color-gold);
  --ag-color-cta: var(--color-primary);
  --ag-color-cta-hover: var(--color-primary-700);
  --ag-color-ink: var(--color-ink);
  --ag-color-muted: var(--color-ink-soft);
  --ag-color-line: var(--color-line);
  --ag-color-surface: var(--color-surface);
  --ag-color-canvas: var(--color-bg);
  --ag-font-display: var(--font-display);
  --ag-font-body: var(--font-body);
  --ag-layout-max: var(--content-width);
  --ag-layout-gutter: var(--space-5);
  --ag-ease: var(--ease);

  --brand-dark: var(--color-primary-700);
  --brand-light: var(--ag-color-primary-soft);
  --orange: var(--color-accent);
  --orange-dark: var(--color-accent-700);
  --orange-light: rgba(214, 31, 38, 0.12);
  --navy: var(--ink);
  --surface: var(--color-surface);
  --surface-soft: var(--color-bg);
  --surface-warm: var(--sand-deep);
  --border: var(--color-line);
  --text-primary: var(--color-ink);
  --text-secondary: var(--color-ink-soft);
  --layout-shell-max: var(--content-width);
  --layout-gutter: var(--space-5);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}