/**
* design.css — the single source of truth for pharmacy UI.
*
* Phase 1 of the 2026-07-08 UI rescue (see DESIGN-AUDIT.md at repo root).
* Every pharmacy page — customer, staff, admin — imports this file as
* its FIRST stylesheet. Pages MAY add page-local rules on top, but
* MUST NOT redefine the tokens declared here in :root.
*
* Import:
*
*
* The design brief (owner directive 2026-07-08):
* - RTL-first (dir="rtl" on every pharmacy page).
* - One font: IBM Plex Sans Arabic → Tajawal → system fallback.
* Preloaded with font-display: swap so cart.html never flashes to
* Times New Roman on slow connections (fm55402 root cause).
* - Zero emoji as UI icons. Icons come from /v2/pharmacy/shared/icons.svg
* referenced via .
* - Every colour lives in a token. Zero hex codes in page files after
* the Phase 3 migration finishes.
* - Every component is BEM-named at its top level (e.g. `.btn`,
* `.badge`, `.timeline__step--current`). Modifiers are additive so
* `.btn.btn--primary` and `.btn.btn--danger` compose cleanly.
* - Base components: btn, card, badge, timeline, field-row,
* empty-state, skeleton, alert, modal, form-input, form-select.
*
* Migration note:
* Old pages ship a legacy `.btn` / `.card` / `.alert` / `.timeline`
* in `shared/styles.css` and `customer.css`. When a page migrates in
* Phase 3, its `` is REMOVED so this
* file wins. Until then, unmigrated pages keep their look untouched.
* ══════════════════════════════════════════════════════════════════ */
/* ══ Font loading ═════════════════════════════════════════════════ */
/* Phase 1 rescue 2026-07-08: pharmacy pages historically declared
Tajawal (staff shell), Cairo (track-order — never loaded!), Inter
(numeric runs), and IBM Plex Sans Arabic (rescue Phase 1 previous
commit). Consolidated to Tajawal for Arabic body/UI + Inter for
LTR numeric runs. The `display=swap` query prevents cart.html
from flashing 'Times New Roman' on slow connections (fm55402 bug). */
@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;800;900&family=Inter:wght@500;700&display=swap');
:root {
/* ─── Brand + neutrals ─────────────────────────────────────────── */
/* Phase 1 rescue: navy #0d2647 wins over the drifted #1e2c5a
(account.html :root claimed #1e2c5a, but every card uses #0d2647).
Gold #b8935a wins over #c19a4f. #1e2c5a + #c19a4f are anti-
regression greppable in Phase 6. */
--color-primary: #0d2647; /* navy — Makkah Medical brand */
--color-primary-dark: #0a1a34; /* navy-deep */
--color-primary-soft: #e6ecf5; /* navy tint for hover / soft bg */
--color-primary-line: #c7d2e2; /* navy line */
--color-brand: var(--color-primary); /* alias */
--color-brand-deep: var(--color-primary-dark);
--color-gold: #b8935a; /* accent — dividers, highlight */
--color-gold-soft: rgba(184,147,90,.14);
--color-gold-line: rgba(184,147,90,.35);
--color-bg: #f8fafc; /* app background */
--color-surface: #ffffff; /* cards */
--color-surface-elevated: #ffffff; /* modals / floating */
--color-surface-muted: #f1f5f9; /* inactive rows / skeleton base */
--color-border: #e2e8f0; /* hairline dividers */
--color-border-strong: #cbd5e1; /* input borders */
--color-text: #0f172a; /* headings + body */
--color-text-muted: #64748b; /* meta, labels */
--color-text-inverse: #ffffff; /* on primary bg */
/* ─── Semantic ─────────────────────────────────────────────────── */
--color-success: #059669;
--color-success-soft: #d1fae5;
--color-success-line: #a7f3d0;
--color-warning: #d97706;
--color-warning-soft: #fef3c7;
--color-warning-line: #fde68a;
--color-danger: #dc2626;
--color-danger-soft: #fee2e2;
--color-danger-line: #fecaca;
--color-info: #2563eb;
--color-info-soft: #dbeafe;
--color-info-line: #bfdbfe;
/* ─── Radii ───────────────────────────────────────────────────── */
--radius-sm: 6px;
--radius-md: 10px;
--radius-lg: 14px;
--radius-xl: 20px;
--radius-pill: 999px;
/* ─── Shadows ─────────────────────────────────────────────────── */
--shadow-card: 0 1px 2px rgba(15,23,42,.04), 0 4px 12px -6px rgba(15,23,42,.10);
--shadow-elev: 0 6px 20px -8px rgba(15,23,42,.15);
--shadow-modal: 0 30px 60px -20px rgba(15,23,42,.35);
--shadow-focus: 0 0 0 3px rgba(15,118,110,.20);
/* ─── Spacing (4px scale) ─────────────────────────────────────── */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-7: 32px;
--space-8: 40px;
/* ─── Type ────────────────────────────────────────────────────── */
--font-family: 'Tajawal', system-ui, -apple-system, 'Segoe UI', sans-serif;
--font-family-num: 'Inter', 'Tajawal', system-ui, sans-serif;
--font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Consolas, 'Liberation Mono', monospace;
--font-size-xs: 12px;
--font-size-sm: 14px;
--font-size-base: 15px;
--font-size-md: 16px;
--font-size-lg: 18px;
--font-size-xl: 22px;
--font-size-2xl: 28px;
--line-height: 1.55;
/* ─── Motion ──────────────────────────────────────────────────── */
--duration-fast: 120ms;
--duration-med: 220ms;
--easing: cubic-bezier(.2,.9,.3,1);
/* ─── Layout ──────────────────────────────────────────────────── */
--touch-target: 44px; /* mobile min */
--header-h: 64px;
--z-modal: 1000;
--z-toast: 1200;
}
/* ══ Body baseline ═════════════════════════════════════════════════ */
body {
margin: 0;
background: var(--color-bg);
color: var(--color-text);
font-family: var(--font-family);
font-size: var(--font-size-base);
line-height: var(--line-height);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
* { box-sizing: border-box; }
img, svg { display: block; max-width: 100%; }
a { color: var(--color-primary); text-decoration: none; }
a:hover, a:focus-visible { text-decoration: underline; }
:focus-visible {
outline: none;
box-shadow: var(--shadow-focus);
border-radius: var(--radius-sm);
}
::selection { background: var(--color-primary-soft); }
button, input, select, textarea { font-family: inherit; }
/* ══════════════════════════════════════════════════════════════════
ICON
Consume the sprite via