/* ==========================================================================
   ShifaCare brand tokens — from "SHIFA-CARE BRAND IDENTITY GUIDELINES" (2026)
   Loaded by the public site + patient web layouts (not the doctor portal
   or the admin panel). Load it AFTER any other stylesheet so it wins.

   Colours (guide p.10) — the logo may only sit on these (p.9):
     Primary Teal  #14B8A6   Deep Teal  #0D9488   Dark Gray   #334155
     Mint Green    #D1FAE5   Soft Blue  #E0F2FE   Light Gray  #F1F5F9
   Typography (p.13-14): Montserrat (Bold / Medium / Regular).
   Arabic: Montserrat Arabic per the guide — not a free web font yet, so
   Cairo stands in until the licensed files are self-hosted (swap
   --brand-font-ar below and the <link> in the layouts).
   ========================================================================== */

:root {
    /* Brand palette */
    --brand-teal: #14b8a6;          /* Primary Teal — accents, icons, logo colour */
    --brand-teal-deep: #0d9488;     /* Deep Teal — buttons, links (better contrast on white) */
    --brand-teal-hover: #0f766e;    /* hover/pressed shade of Deep Teal (UI state only) */
    --brand-navy: #334155;          /* Dark Gray — headings, body text, dark surfaces */
    --brand-mint: #d1fae5;          /* Mint Green — soft backgrounds, success tints */
    --brand-soft-blue: #e0f2fe;     /* Soft Blue — soft backgrounds, info tints */
    --brand-light-gray: #f1f5f9;    /* Light Gray — page/section backgrounds */
    --brand-white: #ffffff;

    /* Typography */
    --brand-font: 'Montserrat', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --brand-font-ar: 'Cairo', 'Montserrat', ui-sans-serif, system-ui, sans-serif;

    /* Existing design-system variables (globals.css, home page) re-pointed at the brand */
    --cn-primary: var(--brand-teal-deep);
    --cn-primary-dark: var(--brand-teal-hover);
    --cn-primary-darker: var(--brand-navy);
    --cn-primary-tint: var(--brand-mint);
    --cn-primary-surface: var(--brand-light-gray);
    --cn-ink: var(--brand-navy);
    --cn-heading: var(--brand-navy);
    --cn-section-tint: var(--brand-light-gray);
    --cn-font-body: var(--brand-font);
    --cn-font-heading: var(--brand-font);

    --sc-primary: var(--brand-teal-deep);
    --sc-primary-d: var(--brand-teal-hover);
}

/* ── Fonts ──────────────────────────────────────────────────────────────
   Form controls don't inherit font by default. Icon fonts (Font Awesome,
   Bootstrap Icons) set their own font-family on their classes, so they
   are untouched by this. */
body,
button, input, select, textarea,
h1, h2, h3, h4, h5, h6 {
    font-family: var(--brand-font);
}
/* (No blanket heading colour: headings on dark footers/banners inherit white.
    Heading colours come from each page's own rules, mapped to the palette.) */

/* Arabic (dir="rtl"): every rule that uses var(--brand-font) switches to the Arabic
   face, and the element list below beats rtl.css, which sets Tajawal for every portal */
html[dir="rtl"] { --brand-font: var(--brand-font-ar); }
html[dir="rtl"] body,
html[dir="rtl"] button, html[dir="rtl"] input, html[dir="rtl"] select, html[dir="rtl"] textarea,
html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3,
html[dir="rtl"] h4, html[dir="rtl"] h5, html[dir="rtl"] h6 {
    font-family: var(--brand-font-ar);
}

/* ── Links & selection ─────────────────────────────────────────────── */
::selection { background: var(--brand-mint); color: var(--brand-navy); }

/* Bootstrap 4 defaults that would otherwise show its blue */
a { color: var(--brand-teal-deep); }
a:hover { color: var(--brand-teal-hover); }
.btn-primary, .bg-primary { background-color: var(--brand-teal-deep) !important; border-color: var(--brand-teal-deep) !important; }
.btn-primary:hover, .btn-primary:focus { background-color: var(--brand-teal-hover) !important; border-color: var(--brand-teal-hover) !important; }
.btn-outline-primary { color: var(--brand-teal-deep); border-color: var(--brand-teal-deep); }
.btn-outline-primary:hover { background-color: var(--brand-teal-deep); border-color: var(--brand-teal-deep); color: #fff; }
.text-primary { color: var(--brand-teal-deep) !important; }
.border-primary { border-color: var(--brand-teal-deep) !important; }
.form-control:focus, .custom-select:focus {
    border-color: var(--brand-teal);
    box-shadow: 0 0 0 .2rem rgba(20, 184, 166, .2);
}
.page-item.active .page-link { background-color: var(--brand-teal-deep); border-color: var(--brand-teal-deep); }
.page-link { color: var(--brand-teal-deep); }