/* AI Receptionist: client dashboard + setup form design tokens (v0.1, 2026-10-25, Design / Rania)
   Working identity only: the product has no name or brand kit yet (Naim decides the name).
   Contrast ratios are measured on --surface (#FFFFFF) unless stated. Text pairs are all >= 4.5:1.
   RTL: use logical properties only (margin-inline-start, padding-inline-end, inset-inline-start, text-align: start). */

@font-face { font-family: "IBM Plex Sans"; src: url("./fonts/IBMPlexSans-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("./fonts/IBMPlexSans-SemiBold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "IBM Plex Sans Arabic"; src: url("./fonts/IBMPlexSansArabic-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Sans Arabic"; src: url("./fonts/IBMPlexSansArabic-SemiBold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
/* Fonts are self-hosted (OFL licence), never loaded from Google Fonts: no third-party request on a health-data dashboard. */

:root {
  /* Neutrals */
  --canvas: #F6F4F0;          /* page background, warm off-white */
  --surface: #FFFFFF;         /* cards, sheets, inputs */
  --line: #E3DFD8;            /* borders, dividers (decorative, not text) */
  --text-primary: #0E2A2B;    /* 15.2:1 */
  --text-secondary: #4A5E5F;  /* 6.9:1 */
  --text-muted: #5A6A6B;      /* 5.7:1 (5.2:1 on --canvas), timestamps and hints only */

  /* Brand (working): calm teal, not WhatsApp green */
  --brand-700: #0B6B66;       /* primary buttons, links, active tab; white on it 6.4:1; 5.5:1 on --brand-100 */
  --brand-800: #08524E;       /* pressed / hover */
  --brand-100: #E2F1EF;       /* assistant bubble, selected row, bot status chip */
  --brand-050: #F1F8F7;

  /* Status: every status is colour + icon + word, never colour alone */
  --handover-700: #8F4405;    /* "À traiter" text; 6.2:1 on --handover-100 */
  --handover-500: #E58A1F;    /* accent stripe / badge dot only, not text */
  --handover-100: #FDF0DC;
  --danger-700: #B42318;      /* emergency, destructive buttons; white on it 6.6:1; 5.6:1 on --danger-100 */
  --danger-100: #FDE8E6;
  --booked-700: #1F4FB8;      /* bookings; 7.3:1 (6.3:1 on --booked-100) */
  --booked-100: #E6EEFC;
  --success-700: #1E7A3C;     /* venu / done / connected; 5.4:1 (4.7:1 on --success-100) */
  --success-100: #E5F4EA;

  /* Type: one family in two scripts so FR and AR feel like the same product */
  --font-latin: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-arabic: "IBM Plex Sans Arabic", "Noto Sans Arabic", "Segoe UI", Tahoma, sans-serif;
  --font: var(--font-latin);
  --fs-12: 0.75rem;   /* meta, badges */
  --fs-14: 0.875rem;  /* secondary text */
  --fs-16: 1rem;      /* body and ALL inputs (16px stops iOS zoom on focus) */
  --fs-18: 1.125rem;  /* card titles */
  --fs-22: 1.375rem;  /* screen titles */
  --fs-28: 1.75rem;   /* big numbers (usage meter, today count) */
  --lh-body: 1.5;
  --lh-arabic: 1.7;   /* Arabic needs more line height */

  /* Space (4px grid), radius, elevation */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px;
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-pill: 999px;
  --shadow-1: 0 1px 2px rgba(14, 42, 43, .06), 0 1px 3px rgba(14, 42, 43, .08);
  --shadow-sheet: 0 -8px 24px rgba(14, 42, 43, .12);

  /* Touch and layout */
  --tap: 44px;               /* minimum touch target */
  --tabbar-h: 64px;
  --bp-tablet: 768px;        /* list + detail side by side from here */
  --bp-desktop: 1024px;      /* side navigation instead of bottom tabs */
  --content-max: 1200px;
  --form-max: 640px;         /* setup form column */
}

[dir="rtl"] {
  --font: var(--font-arabic);
  --lh-body: var(--lh-arabic);
}

/* Numbers, phones, times and dates always render left-to-right inside Arabic text */
.ltr, bdi.ltr, input[type="tel"], input[type="time"] { direction: ltr; unicode-bidi: isolate; }
/* Directional icons (back, chevrons, send) flip in RTL; clocks, play buttons and the mic do not */
[dir="rtl"] .icon-dir { transform: scaleX(-1); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}