/*
 * Mwangaza Hub design tokens. Nurunet's values live at :root.
 * A customer's theme (see theme.example.css) redefines only the --brand-* set.
 * Values come from reference/Mwangaza Hub Phase 1.dc.html (Foundation) and the
 * light/dark token table in reference/Mwangaza Hub All Phases v2.dc.html.
 */
:root {
  color-scheme: light dark;

  /* Brand: the only variables a customer theme overrides. */
  --brand-primary: #133b4b;
  --brand-on-primary: #ffffff;
  --brand-accent: #f2b544;
  --brand-on-accent: #0e2730;
  --brand-tint: #f3f5f5; /* page background */

  /* Surfaces and text */
  --color-page: var(--brand-tint);
  --color-surface: #ffffff;
  --color-text: #0e2730;
  --color-text-soft: #3c525b;
  --color-muted: #52676f;
  --color-line: #d5dedf;
  --color-line-strong: #7e9099; /* input borders: 3:1 against the surface */
  --color-inverse: #0e2730; /* dark cards, e.g. the cost preview */
  --color-on-inverse: #ffffff;
  --color-on-inverse-soft: #c3cdd0;
  --color-on-inverse-danger: #f9b4a8;

  /* Action and focus */
  --color-action: var(--brand-primary);
  --color-on-action: var(--brand-on-primary);
  --color-mark: var(--brand-accent); /* a mark, never text */
  --color-focus: var(--brand-primary);

  /* Status: foreground on tinted background */
  --status-queued: #52676f;
  --status-queued-bg: #edf1f2;
  --status-sent: #133b4b;
  --status-sent-bg: #e3ecef;
  --status-delivered: #0f6b4e;
  --status-delivered-bg: #e2eee8;
  --status-failed: #891204;
  --status-failed-bg: #fbedeb;
  --status-held: #8a5a0e;
  --status-held-bg: #fcf1dd;
  --status-unknown: #3c525b;
  --status-unknown-bg: #e4e9ea;

  /* Type: the device's own font, zero bytes to download */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, Menlo, Consolas, monospace;
  --text-xs: 0.75rem;
  --text-sm: 0.8125rem; /* 13: labels, caps */
  --text-md: 0.9375rem; /* 15 */
  --text-base: 1.0625rem; /* 17: body and buttons */
  --text-lg: 1.25rem; /* 20 */
  --text-xl: 1.5rem; /* 24: figures */
  --text-2xl: 1.875rem; /* 30: titles */
  --leading: 1.5;

  /* Spacing, radius, elevation */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;
  --shadow-card: 0 1px 2px rgb(14 39 48 / 6%), 0 12px 24px -16px rgb(14 39 48 / 30%);
  --focus-ring: 0 0 0 3px var(--color-surface), 0 0 0 6px var(--color-focus);
  --target: 44px; /* minimum touch target */
}

/* Dark follows the phone's setting. Surfaces step up in brightness, not shadow. */
@media (prefers-color-scheme: dark) {
  :root {
    --brand-primary: #6fb9cb;
    --brand-on-primary: #0b1c22;
    --brand-on-accent: #0e2730;
    --brand-tint: #0b1c22;

    --color-surface: #122830;
    --color-text: #eaefef;
    --color-text-soft: #c3cdd0;
    --color-muted: #8fa5ac;
    --color-line: #2a434c;
    --color-line-strong: #6d858d;
    --color-inverse: #1b3640;
    --color-on-inverse: #ffffff;
    --color-on-inverse-soft: #c3cdd0;

    --status-queued: #a9bbc1;
    --status-queued-bg: #1d333b;
    --status-sent: #8fd0de;
    --status-sent-bg: #17353f;
    --status-delivered: #4cc08f;
    --status-delivered-bg: #11382d;
    --status-failed: #f07a6a;
    --status-failed-bg: #3d1d1a;
    --status-held: #f2b544;
    --status-held-bg: #3a2c10;
    --status-unknown: #c3cdd0;
    --status-unknown-bg: #26393f;

    --shadow-card: none;
  }
}