/* ─────────────────────────────────────────────────────────
   Design tokens — Rekaz design system.
   Dark mode is the default (:root); body.light-theme overrides.
   ───────────────────────────────────────────────────────── */
:root {
  --bg-page: #0C0C0C;
  --bg-card: #171717;
  --bg-card-hover: #1F1F1F;
  --bg-input: #212121;
  --bg-sidebar: #101010;
  --bg-sidebar-section: #161616;
  --text-primary: #F2F2F2;
  --text-secondary: #8A8A8A;
  --text-muted: #565656;
  --border-color: #2B2B2B;
  --border-hover: #3D3D3D;

  /* Rekaz brand: vermillion red + near-black ink (see public/logo.png). */
  --brand-red: #E8402B;
  --brand-red-dark: #BE2E1C;
  --brand-ink: #111111;

  --accent: var(--brand-red);
  --accent-dark: var(--brand-red-dark);
  /* Informational blue — deliberately NOT a brand colour: it carries the
     "read receipt" / "open status" / "info" meanings, which must stay
     distinct from the red primary action colour. */
  --accent-secondary: #38BDF8;
  --accent-gradient: linear-gradient(135deg, #E8402B 0%, #F26B3A 100%);
  --accent-gradient-hover: linear-gradient(135deg, #D3341F 0%, #E2572A 100%);

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;

  --success: #10B981;
  --warning: #F59E0B;
  --danger: #EF4444;
  --danger-soft: rgba(239, 68, 68, .12);
  --info: #3B82F6;
  --teal: #14B8A6;

  /* Stacking order: content < dropdown < backdrop < modal < modal dropdown */
  --z-content: 1;
  --z-dropdown: 100;
  --z-backdrop: 1000;
  --z-modal: 1100;
  --z-modal-dropdown: 1200;
  --z-toast: 1300;

  --font-ar: 'Tajawal', 'Noto Sans Arabic', system-ui, sans-serif;
  --font-en: 'Inter', system-ui, -apple-system, sans-serif;
}

body.light-theme {
  --bg-page: #F4F3F1;
  --bg-card: #FFFFFF;
  --bg-card-hover: #FAF8F7;
  --bg-input: #F4F3F1;
  --bg-sidebar: #FAFAFA;
  --bg-sidebar-section: #F5F4F2;
  --text-primary: #131313;
  --text-secondary: #5F5C5A;
  --text-muted: #8A8683;
  --border-color: #E5E2DF;
  --border-hover: #CFCAC6;
}