/* Dr. Maher Alahdab — design tokens (source: 2023 brand manual) */
:root {
  /* Brand channels for alpha variants */
  --rgb-navy: 25, 75, 139;     /* #194b8b brand primary */
  --rgb-blue: 41, 124, 229;    /* #297ce5 brand blue */
  --rgb-cyan: 27, 193, 210;    /* #1bc1d2 brand cyan */
  --rgb-ink: 14, 44, 86;       /* #0e2c56 deep tone of the brand navy */
  --rgb-paper: 255, 255, 255;

  /* Brand colors */
  --c-navy: #194b8b;           /* 8.7:1 with white — CTA fill, headings */
  --c-navy-deep: #123a6e;      /* hover state of CTA */
  --c-blue: #297ce5;           /* decorative only: 4.1:1 with white, fails AA for text */
  --c-blue-text: #1e64c8;      /* 5.4:1 on paper — accent text on light */
  --c-cyan: #1bc1d2;           /* accent on dark: 7.4:1 on ink */
  --c-cyan-soft: #8fe3ec;      /* focus ring on dark grounds */
  --c-whatsapp: #128c4b;       /* 4.6:1 with white */

  /* Text */
  --c-text: #0f2440;           /* 15.2:1 on paper */
  --c-text-muted: #4a5a70;     /* 7.0:1 on white, 6.3:1 on mist */
  --c-text-on-dark: #f3f7fb;
  --c-text-on-dark-muted: #c2d2e6; /* 9.1:1 on ink, 6.0:1 on navy */
  --c-line: rgba(var(--rgb-navy), .16);
  --c-line-dark: rgba(255, 255, 255, .14);
  --c-error: #b3261e;          /* 6.1:1 on white */

  /* Surfaces — only brand colours and their tints, alternated section by section */
  --s-paper: #ffffff;
  --s-mist: #edf4fd;           /* tint of brand blue #297ce5 */
  --s-aqua: #e8f8fa;           /* tint of brand cyan #1bc1d2 */
  --s-white: #ffffff;
  --s-navy: #194b8b;           /* brand navy */
  --s-ink: #0e2c56;            /* deep tone of brand navy */

  /* Typography */
  --ff-en: "Montserrat", system-ui, sans-serif;
  --ff-ar: "Alexandria", "Montserrat", system-ui, sans-serif;
  --ff: var(--ff-en);

  --fs-h1: clamp(1.85rem, 1.05rem + 2.7vw, 3.35rem);
  --fs-h2: clamp(1.6rem, 1rem + 1.9vw, 2.7rem);
  --fs-h3: clamp(1.15rem, 1rem + .5vw, 1.45rem);
  --fs-lead: clamp(1.05rem, 1rem + .25vw, 1.2rem);
  --fs-body: 1rem;
  --fs-sm: .875rem;
  --fs-xs: .78rem;

  --lh-tight: 1.14;
  --lh-sub: 1.4;
  --lh-body: 1.72;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semi: 600;
  --fw-bold: 700;

  /* Layout */
  --container: 1300px;
  --gutter: clamp(1.15rem, 4vw, 2.5rem);
  --section-pad: clamp(4.5rem, 7vw, 8rem);
  --gap: clamp(1.5rem, 3vw, 3rem);
  --gap-lg: clamp(2rem, 5vw, 4.5rem);
  --header-h: 76px;

  /* Radii — soft clinic scale; proof photos stay small */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* Shadows — tinted with brand ink, never pure black */
  --sh-sm: 0 2px 6px rgba(var(--rgb-ink), .05), 0 8px 22px rgba(var(--rgb-ink), .05);
  --sh-md: 0 4px 12px rgba(var(--rgb-ink), .06), 0 18px 44px rgba(var(--rgb-ink), .08);
  --sh-lg: 0 10px 24px rgba(var(--rgb-ink), .08), 0 34px 80px rgba(var(--rgb-ink), .14);

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-lux: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 220ms;
  --dur-base: 500ms;
  --dur-slow: 900ms;

  /* Z-index */
  --z-header: 50;
  --z-dock: 45;
  --z-lightbox: 100;
}

html[lang="ar"] { --ff: var(--ff-ar); }