/* ==========================================================================
   Medical Care Clinics — design tokens (single source for the website, the admin, payment and patient forms)
   Brand palette from the approved logo: Deep Teal #00595A · Turquoise #058A8D · Sage #96B579 · Cool Gray #969A9B · Off-white #F7F8F4
   Font: Readex Pro (Google Fonts, SIL Open Font License) — Arabic + Latin, one family for both directions.
   Breakpoints (used in media queries, CSS variables cannot be): phone ≤ 560 · tablet ≤ 860 · laptop ≤ 1180 · desktop > 1180
   ========================================================================== */
:root {
  /* ---- Palette ---- */
  --mcc-teal-900: #003f40;
  --mcc-teal-800: #00595a;   /* primary — Deep Teal */
  --mcc-teal-700: #046a6c;
  --mcc-teal-600: #058a8d;   /* interactive — Turquoise */
  --mcc-teal-500: #2f9fa1;
  --mcc-teal-200: #b9dcd9;
  --mcc-teal-100: #d8ebe8;
  --mcc-teal-50:  #eef5f3;
  --mcc-sage-700: #5f7d45;
  --mcc-sage-500: #96b579;   /* secondary accent — Sage */
  --mcc-sage-100: #e7efdd;
  --mcc-gray-500: #969a9b;   /* Cool Gray — decorative / borders */
  --mcc-gray-600: #6b7273;   /* secondary text (4.9:1 on white) */
  --mcc-gray-200: #e1e5e2;
  --mcc-offwhite: #f7f8f4;   /* page background */
  --mcc-white:    #ffffff;
  --mcc-ink:      #12302f;   /* headings */
  --mcc-ink-2:    #34494a;   /* body text */

  /* ---- Semantic ---- */
  --mcc-primary:          var(--mcc-teal-800);
  --mcc-primary-hover:    var(--mcc-teal-900);
  --mcc-interactive:      var(--mcc-teal-600);
  --mcc-interactive-hover:var(--mcc-teal-700);
  --mcc-focus-ring:       0 0 0 3px rgba(5, 138, 141, .35);
  --mcc-focus-outline:    #c78a18;           /* keyboard focus: high contrast on teal and white */
  --mcc-disabled-bg:      #e6e9e7;
  --mcc-disabled-fg:      #98a1a0;
  --mcc-success:          #2e7d4f;  --mcc-success-bg: #e6f3ea;
  --mcc-warning:          #9a5b05;  --mcc-warning-bg: #fdf2df;
  --mcc-error:            #b3261e;  --mcc-error-bg:   #fbeceb;
  --mcc-info:             #2d5f9a;  --mcc-info-bg:    #eaf1fa;
  --mcc-border:           #e1e7e3;
  --mcc-surface:          var(--mcc-white);
  --mcc-surface-alt:      var(--mcc-offwhite);

  /* ---- Typography ---- */
  --mcc-font: "Readex Pro", system-ui, -apple-system, "Segoe UI", Tahoma, sans-serif;
  --mcc-fs-xs: 12.5px; --mcc-fs-sm: 14px; --mcc-fs-md: 16px; --mcc-fs-lg: 18px; --mcc-fs-xl: 22px; --mcc-fs-2xl: 28px; --mcc-fs-3xl: 40px;
  --mcc-fw-regular: 400; --mcc-fw-medium: 500; --mcc-fw-bold: 600;
  --mcc-lh-body: 1.75; --mcc-lh-tight: 1.3;

  /* ---- Spacing (4-pt scale) ---- */
  --mcc-s-1: 4px; --mcc-s-2: 8px; --mcc-s-3: 12px; --mcc-s-4: 16px; --mcc-s-5: 24px; --mcc-s-6: 32px; --mcc-s-7: 48px; --mcc-s-8: 64px;

  /* ---- Shape & depth ---- */
  --mcc-r-sm: 10px; --mcc-r: 14px; --mcc-r-lg: 20px; --mcc-r-xl: 28px; --mcc-r-pill: 999px;
  --mcc-sh-sm: 0 1px 2px rgba(18, 48, 47, .06), 0 2px 6px rgba(18, 48, 47, .05);
  --mcc-sh:    0 12px 32px -18px rgba(18, 48, 47, .28);
  --mcc-sh-lg: 0 26px 60px -30px rgba(0, 89, 90, .40);
}