/*
 * Design tokens — Clare Service brand identity.
 * Primary: Dark Blue #000044. Accent: Red #ED1C24 (CTAs, active/progress
 * states, small highlights and the logo swoosh only — never large
 * backgrounds or body text). Every other stylesheet/template reads
 * colours, radius, shadow and fonts through these custom properties.
 * To rebrand, edit only this file (and static/brand/*.svg).
 */
:root {
  color-scheme: light dark;

  --brand-primary: #000044;
  --brand-accent: #ED1C24;
  /* Red for text/links on light backgrounds (AA), also used for small buttons */
  --brand-accent-ink: #c4121a;

  --on-primary: #ffffff;
  --on-primary-muted: #c9cdf0;
  --on-accent: #ffffff;

  --bg: #f5f6fa;
  --surface: #ffffff;
  --ink: #0d1030;
  --muted: #5a5f7a;
  --line: #dfe2ee;
  /* Navy used for text/links/outlines on the page background */
  --primary-ink: #000044;

  --radius: 0.6rem;
  --radius-lg: 1rem;
  --shadow: 0 0.5rem 1.5rem rgba(0, 0, 68, 0.14);
  --shadow-sm: 0 0.15rem 0.5rem rgba(0, 0, 68, 0.08);
  --focus-ring: #1a4dff;

  /* Arabic: Almarai (Google Fonts). Latin: Segoe UI where installed (not self-hosted — Microsoft licence). */
  --font-arabic: 'Almarai', 'Segoe UI Variable', 'Segoe UI', system-ui, sans-serif;
  --font-latin: 'Segoe UI Variable', 'Segoe UI', system-ui, -apple-system, sans-serif;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2.5rem;
  --space-6: 4rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #05072a;
    --surface: #0c1045;
    --ink: #eef0ff;
    --muted: #a4a9cf;
    --line: #1f2666;
    --primary-ink: #c9cdff;
    --brand-accent-ink: #ff4d54;
    --shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.5);
    --shadow-sm: 0 0.15rem 0.5rem rgba(0, 0, 0, 0.4);
    --focus-ring: #8fa8ff;
  }
}