/**
 * Clinical Skills — design tokens (ألوان + مقياس خط)
 */
:root {
    --cl-navy: #0f2744;
    --cl-navy-mid: #1e3a5f;
    --cl-teal: #0d9488;
    --cl-teal-light: #14b8a6;
    --cl-bg: #f8fafc;
    --cl-bg-muted: #f1f5f9;
    --cl-text: #1e293b;
    --cl-text-muted: #64748b;
    --cl-white: #ffffff;
    --cl-radius: 12px;
    --cl-shadow: 0 18px 45px rgba(15, 39, 68, 0.12);
    --font-ar: "Cairo", system-ui, sans-serif;
    --font-en: "DM Sans", system-ui, sans-serif;

    /* Typography — rem (أساس 16px على clinical) */
    --cl-fs-display: clamp(1.75rem, 4.5vw, 2.65rem);
    --cl-fs-h1: clamp(1.5rem, 3vw, 2rem);
    --cl-fs-h2: clamp(1.35rem, 2.5vw, 1.75rem);
    --cl-fs-h3: 1.125rem;
    --cl-fs-h4: 1.375rem;
    --cl-fs-lead: 1.0625rem;
    --cl-fs-body: 1rem;
    --cl-fs-sm: 0.9375rem;
    --cl-fs-xs: 0.8125rem;
    --cl-fs-caption: 0.75rem;
    --cl-fs-nav: 0.9375rem;
    --cl-fs-btn: 0.875rem;
    --cl-fs-btn-lg: 1rem;
    --cl-fs-eyebrow: 0.9375rem;
    --cl-lh-display: 1.25;
    --cl-lh-heading: 1.3;
    --cl-lh-body: 1.7;
    --cl-lh-normal: 1.5;

    /* LMS bridge (px — style.css يستخدم html 62.5%) */
    --cl-fs-h1-lms: 24px;
    --cl-fs-h2-lms: 20px;
    --cl-fs-h3-lms: 18px;
    --cl-fs-h4-lms: 16px;
    --cl-fs-sm-lms: 14px;
    --cl-fs-body-lms: 15px;
}