/* ============================================================
   VARIABLES — Design tokens
   ============================================================ */

:root {
  /* ===== Brand ===== */
  --primary: #0047cc;
  --primary-hover: #003699;
  --primary-light: #eef4ff;

  /* ===== Neutrals ===== */
  --white: #ffffff;
  --black: #000000;
  --bg-color: #f4f6f9;
  --card-bg: #ffffff;
  --text-dark: #1e293b;
  --text-muted: #64748b;
  --border-color: #e2e8f0;
  --desktop-bg: #1a1a1a;

  /* ===== Blues ===== */
  --blue-50: #eff6ff;
  --blue-100: #dbeafe;
  --blue-200: #93bbfd;
  --blue-400: #3b82f6;
  --blue-light-bg: #f0f5ff;

  /* ===== Greens ===== */
  --green-500: #22c55e;

  /* ===== Reds ===== */
  --red-50: #fef2f2;
  --red-100: #fee2e2;
  --red-200: #fecaca;
  --red-300: #fca5a5;
  --red-500: #ef4444;
  --red-800: #991b1b;

  /* ===== Ambers ===== */
  --amber-500: #f59e0b;
  --amber-700: #b45309;
  --amber-800: #92400e;

  /* ===== Grays ===== */
  --gray-50: #f8fafc;
  --gray-100: #f1f5f9;
  --gray-200: #e5e7eb;
  --gray-300: #dce1e7;
  --gray-400: #94a3b8;
  --gray-500: #6b7280;
  --gray-700: #1f2937;

  /* ===== Messages ===== */
  --sent-bubble: #eef4ff;
  --notice-bg: #fffbeb;
  --notice-border: #fef3c7;

  /* ===== Layout tokens ===== */
  --status-bar-h: 36px;
}