/*
 * Design tokens: the single place to change colours, type, spacing and shape.
 *
 * --app-* tokens are ours. The second block maps them onto Bootstrap 5.3's
 * own CSS variables, so Bootstrap components pick them up without a Sass build.
 *
 * Contrast (WCAG 2.2 AA needs 4.5:1 for normal text). Checked against #FFFFFF:
 *   --app-text #0F172A 17.9:1 · --app-text-muted #475569 7.6:1
 *   --app-primary #4338CA 7.9:1 (also white text on primary 7.9:1)
 *   --app-success #15803D 5.0:1 · --app-warning #B45309 5.0:1
 *   --app-danger #B91C1C 6.5:1 · --app-info #0369A1 5.9:1
 * Status badges use these as TEXT colours on very light tints, never white
 * text on a pale fill.
 */
:root {
  /* Colour: surfaces and text */
  --app-bg: #F8FAFC;
  --app-surface: #FFFFFF;
  --app-surface-muted: #F1F5F9;
  --app-border: #E2E8F0;
  --app-border-strong: #CBD5E1;
  --app-text: #0F172A;
  --app-text-muted: #475569;

  /* Colour: brand accent */
  --app-primary: #4338CA;
  --app-primary-hover: #3730A3;
  --app-primary-subtle: #EEF2FF;
  --app-primary-rgb: 67, 56, 202;

  /* Colour: semantic (text colour + light tint for backgrounds) */
  --app-success: #15803D;
  --app-success-subtle: #F0FDF4;
  --app-warning: #B45309;
  --app-warning-subtle: #FFFBEB;
  --app-danger: #B91C1C;
  --app-danger-subtle: #FEF2F2;
  --app-info: #0369A1;
  --app-info-subtle: #F0F9FF;
  --app-neutral: #334155;
  --app-neutral-subtle: #F1F5F9;

  /* Typography */
  --app-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --app-fs-xs: 0.75rem;
  --app-fs-sm: 0.8125rem;
  --app-fs-body: 0.9375rem;
  --app-fs-lg: 1.125rem;
  --app-fs-h1: 1.5rem;
  --app-fw-medium: 500;
  --app-fw-semibold: 600;

  /* Spacing: 4px base scale */
  --app-space-1: 4px;
  --app-space-2: 8px;
  --app-space-3: 12px;
  --app-space-4: 16px;
  --app-space-5: 20px;
  --app-space-6: 24px;
  --app-space-8: 32px;

  /* Shape */
  --app-radius-sm: 6px;
  --app-radius: 8px;
  --app-radius-lg: 12px;
  --app-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);

  /* Layout */
  --app-touch: 44px;
  --app-topbar-height: 56px;
  --app-bottom-nav-height: 64px;
  --app-sidebar-width: 248px;
  --app-sidebar-collapsed-width: 72px;

  /* ---- Map onto Bootstrap 5.3 ---- */
  --bs-body-bg: var(--app-bg);
  --bs-body-color: var(--app-text);
  --bs-body-font-family: var(--app-font);
  --bs-body-font-size: var(--app-fs-body);
  --bs-secondary-color: var(--app-text-muted);
  --bs-border-color: var(--app-border);
  --bs-border-radius: var(--app-radius);
  --bs-border-radius-sm: var(--app-radius-sm);
  --bs-border-radius-lg: var(--app-radius-lg);
  --bs-primary: var(--app-primary);
  --bs-primary-rgb: var(--app-primary-rgb);
  --bs-link-color: var(--app-primary);
  --bs-link-color-rgb: var(--app-primary-rgb);
  --bs-link-hover-color: var(--app-primary-hover);
  --bs-focus-ring-color: rgba(var(--app-primary-rgb), 0.35);
}