:root {
  /* Palette - stitch */
  --color-bg: #F4EFE8; /* sand */
  --color-surface: #FFFFFF; /* white surface */
  --color-surface-raised: #FBF8F4; /* surface-2 alias */
  --color-text: #16222E; /* text alias */
  --color-text-muted: #5B6875; /* muted alias */
  --color-border: #E6DDD1; /* line alias */
  --color-primary: #0F2A44; /* navy alias */
  --color-on-primary: #FFFFFF; /* accent-contrast alias */
  --color-accent: #0E7C86; /* teal alias */
  --color-accent-soft: #EAF5F5; /* teal-50 alias */
  --color-danger: #C0392B; /* red alias */
  --color-on-danger: #FFFFFF; /* accent-contrast alias */
  --color-warning: #B7791F; /* amber alias */
  --color-success: #2F7D57; /* green alias */
  --color-focus: #0E7C86; /* teal alias — AA compliant on all surfaces */
  --color-surface-variant: #EBE3D8; /* sand-2 alias */
  --color-on-surface-variant: #16222E;

  /* Typography */
  --font-sans: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* stitch */
  --font-fa: "Vazirmatn", "Noto Naskh Arabic", "Noto Nastaleeq Urdu", "Segoe UI", system-ui, -apple-system, sans-serif; /* app.css fallback */

  /* Type scale (stitch-inspired rem equivalents of 12–32px) */
  --text-xs: 0.75rem; /* 12px */
  --text-sm: 0.875rem; /* 14px */
  --text-base: 1rem; /* 16px */
  --text-lg: 1.125rem; /* 18px */
  --text-xl: 1.25rem; /* 20px */
  --text-2xl: 1.5rem; /* 24px */

  /* Spacing (4px grid) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;

  /* Radii */
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-full: 999px;

  /* Shadows (stitch) */
  --shadow-sm: 0 1px 3px rgba(15, 42, 68, 0.08), 0 4px 12px rgba(15, 42, 68, 0.04);
  --shadow-md: 0 4px 12px rgba(15, 42, 68, 0.1), 0 12px 28px rgba(15, 42, 68, 0.08);

  /* Focus ring (2px+, visible on both themes) */
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--color-accent) 40%, transparent), 0 0 0 5px color-mix(in srgb, var(--color-accent) 15%, transparent);
}

/* Dark mode: class override (highest priority) */
:root[data-theme="dark"] {
  /* Palette — derived from stitch and tuned for WCAG AA */
  --color-bg: #0B1826; /* from app.css, AA-checked */
  --color-surface: #11243A; /* from app.css, AA-checked */
  --color-surface-raised: #152B44;
  --color-text: #E6EDF3; /* from app.css, AA-checked ≥4.5:1 on bg/surface */
  --color-text-muted: #9DB0C2; /* from app.css, AA-checked on bg/surface */
  --color-border: #22405E;
  --color-primary: #081320; /* sidebar darken, AA-checked on dark */
  --color-on-primary: #FFFFFF;
  --color-accent: #3DB2BB; /* teal-light, AA-checked on surface */
  --color-accent-soft: rgba(61, 178, 187, 0.14);
  --color-danger: #FF8B7E; /* from app.css, AA-checked on surface */
  --color-on-danger: #06222A; /* app.css --accent-contrast; white on #FF8B7E fails AA */
  --color-warning: #F2B65A; /* from app.css */
  --color-success: #6FCF97; /* from app.css */
  --color-focus: #3DB2BB;
  --color-surface-variant: #0E1F33; /* app.css dark --surface-sunken */
  --color-on-surface-variant: #E6EDF3;
}

/* Dark mode: prefers-color-scheme */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg: #0B1826;
    --color-surface: #11243A;
    --color-surface-raised: #152B44;
    --color-text: #E6EDF3;
    --color-text-muted: #9DB0C2;
    --color-border: #22405E;
    --color-primary: #081320;
    --color-on-primary: #FFFFFF;
    --color-accent: #3DB2BB;
    --color-accent-soft: rgba(61, 178, 187, 0.14);
    --color-danger: #FF8B7E;
    --color-on-danger: #06222A;
    --color-warning: #F2B65A;
    --color-success: #6FCF97;
    --color-focus: #3DB2BB;
    --color-surface-variant: #0E1F33;
    --color-on-surface-variant: #E6EDF3;
  }
}

/* RTL: Persian/Arabic typography */
:root:lang(fa), :root:lang(ar) {
  --font-sans: var(--font-fa); /* use Persian/Arabic stack for all lang=fa/ar */
}

/* Back-compat aliases (vars-used.md) */
--bg: var(--color-bg);
--surface: var(--color-surface);
--surface-2: var(--color-surface-raised);
--surface-sunken: var(--color-surface-variant);
--text: var(--color-text);
--text-strong: var(--color-text);
--muted: var(--color-text-muted);
--line: var(--color-border);
--line-strong: var(--color-border);
--accent: var(--color-accent);
--accent-strong: var(--color-primary);
--accent-soft: var(--color-accent-soft);
--accent-contrast: var(--color-on-primary);
--danger: var(--color-danger);
--danger-soft: color-mix(in srgb, var(--color-danger) 15%, transparent);
--warning: var(--color-warning);
--warning-soft: color-mix(in srgb, var(--color-warning) 15%, transparent);
--success: var(--color-success);
--success-soft: color-mix(in srgb, var(--color-success) 15%, transparent);
--alert: var(--color-warning); /* coral alias → amber */
--alert-soft: color-mix(in srgb, var(--color-warning) 15%, transparent);
--amber: var(--color-warning);
--amber-50: var(--color-accent-soft);
--coral: var(--color-warning);
--coral-50: var(--color-accent-soft);
--green: var(--color-success);
--green-50: var(--color-success-soft);
--navy: var(--color-primary);
--navy-2: #11243A;
--navy-3: #16222E;
--red: var(--color-danger);
--red-50: var(--danger-soft);
--sand: var(--color-bg);
--sand-2: var(--color-surface-variant);
--sand-3: var(--color-border);
--teal: var(--color-accent);
--teal-100: var(--color-accent-soft);
--teal-50: var(--color-accent-soft);
--teal-600: var(--color-primary);
--focus: var(--focus-ring);
--radius: var(--radius-md);
--radius-md: var(--radius-md);
--shadow-xs: var(--shadow-sm);
--shadow-sm: var(--shadow-sm);
--shadow-md: var(--shadow-md);
--shadow-lg: var(--shadow-md);
--sidebar-bg: var(--color-primary);
--sidebar-text: var(--color-text-muted);
--sidebar-text-strong: var(--color-text);
--sidebar-hover: var(--color-accent-soft);
--sidebar-active: rgba(61, 178, 187, 0.2);
--sidebar-w: 17rem; /* ~272px */
--tabbar-h: 4.25rem;
--empty-img: none;
--icon: inherit;
--ink: var(--color-text);
--font-body: var(--font-sans);

/* RTL note: no physical left/right used; rely on inset-inline-start/end */
/* RTL note: use [dir="rtl"] selectors in components where needed (not here) */