/**
 * Design tokens for the Alshifa Pharmacy CRM.
 * Values transcribed 1:1 from the design handoff (`Alshifa CRM.dc.html`).
 * Prefer these over raw hex values so a rebrand stays a one-file change.
 */
:root {
  /* ---- surfaces ---- */
  --app-bg: #eef3f3;
  --card-bg: #ffffff;
  --input-bg: #fbfdfd;
  --topbar-bg: #f6faf9;
  --table-head-bg: #f6faf9;
  --row-hover-bg: #f7fbfa;

  /* ---- sidebar ---- */
  --sidebar-bg: #0c2b2d;
  --sidebar-fg: #bcd6d6;
  --sidebar-muted: #6f9b9b;
  --sidebar-label: #5c8585;
  --sidebar-active-bg: rgba(255, 255, 255, 0.09);
  --sidebar-chip-bg: rgba(255, 255, 255, 0.05);
  --sidebar-dash-border: #2f5658;
  --sidebar-dash-fg: #9fc7c7;
  --sidebar-dash-hover-fg: #d6f0ee;
  --sidebar-user-name: #eaf6f4;
  --sidebar-avatar-bg: #1f6b6b;
  --sidebar-avatar-fg: #cdebe7;

  /* ---- borders ---- */
  --border-topbar: #e0eaea;
  --border-card: #e3eaea;
  --border-control: #dde8e8;
  --border-soft: #eef3f3;
  --border-faint: #f1f5f5;
  --border-consent: #e0eded;
  --border-outline-teal: #bfe0e2;

  /* ---- brand ---- */
  --teal: #0f7d86;
  --teal-hover: #0b656c;
  --teal-soft-bg: #eef8f9;
  --accent: #36d6c3;
  --brand-mark: #13b39c;

  /* ---- WhatsApp / success ---- */
  --wa-green: #1faf54;
  --wa-green-hover: #1a9748;
  --green-soft-bg: #e8f6ed;
  --green-soft-bg-hover: #d6efe0;
  --green-soft-fg: #1f8a52;

  /* ---- amber / alerts ---- */
  --amber: #e08a2c;
  --amber-fg: #b6731f;
  --amber-bg: #fbeede;
  --allergy-bg: #fdf1e7;
  --allergy-border: #f3d8bf;
  --allergy-fg: #c2701f;
  --required: #d4663f;

  /* ---- text ---- */
  --text: #16302e;
  --text-secondary: #425857;
  --text-muted: #7a8d8c;
  --text-muted-2: #8aa0a0;
  --text-soft: #5b7170;
  --text-sub: #6f8584;
  --text-disabled: #a3b6b5;
  --text-dash: #aab9b9;

  /* ---- gradients ---- */
  --grad-rewards: linear-gradient(135deg, #0f7d86, #0a4c52);
  --grad-loyalty-dash: linear-gradient(135deg, #0f7d86, #0b5158);
  --grad-loyalty-profile: linear-gradient(135deg, #13413f, #0c2b2d);
  --on-gradient-muted: #a8dcdc;
  --on-gradient-muted-2: #7fb3b3;
  --on-gradient-mono: #cdebe7;

  /* ---- disabled ---- */
  --disabled-bg: #bcd2d2;

  /* ---- radii ---- */
  --r-control: 11px;
  --r-icon-btn: 9px;
  --r-nav: 10px;
  --r-card: 16px;
  --r-card-lg: 18px;
  --r-pill: 20px;
  --r-chip: 18px;

  /* ---- shadows ---- */
  --shadow-card: 0 8px 24px -20px rgba(16, 49, 47, 0.3);
  --shadow-modal: 0 30px 80px -30px rgba(0, 0, 0, 0.5);
  --shadow-rewards: 0 18px 40px -22px rgba(11, 76, 82, 0.85);
  --shadow-rewards-lg: 0 20px 44px -22px rgba(11, 76, 82, 0.9);
  --shadow-toast: 0 18px 40px -16px rgba(0, 0, 0, 0.5);

  /* ---- layout ---- */
  --sidebar-w: 248px;
  --topbar-h: 72px;
  --content-pad: 30px;
  --content-max: 1180px;
  --content-max-narrow: 1080px;

  /* ---- type ---- */
  --font-sans: 'Public Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ---- qr ---- */
  --qr-dark: #0c2b2d;
}