/* ============================================================
   LaithMD — Design System v1.0  (LOCKED)
   Single source of truth for: Media Kit, laithmd.com, Verified Clinics
   Do not fork. Extend only by adding new tokens.
   ============================================================ */

:root{
  /* ---- Core palette ---- */
  --ink:            #0B0C0E;   /* primary dark / cover ground */
  --graphite:       #17191C;   /* raised surface on dark */
  --graphite-2:     #212429;   /* hairline on dark */
  --platinum:       #8E9297;   /* secondary text on dark  (6.4:1) */
  --platinum-lt:    #C6C9CC;   /* body text on dark      (11:1) */
  --alabaster:      #EDEBE6;   /* light spread ground */
  --alabaster-2:    #E2DFD8;   /* light surface / hairline */
  --champagne:      #C9B79A;   /* ACCENT — rules, numerals, marks */
  --champagne-deep: #756240;   /* accent TEXT on light grounds — 4.93:1 on Alabaster */
  --champagne-mark: #8A7550;   /* accent for GRAPHICS/rules on light grounds — 3:1 */
  --white:          #FFFFFF;

  /* ---- Semantic ---- */
  --bg:             var(--ink);
  --fg:             var(--platinum-lt);
  --fg-strong:      var(--white);
  --fg-muted:       var(--platinum);
  --rule:           var(--graphite-2);
  --accent:         var(--champagne);

  /* ---- Type families ---- */
  --font-display:   "Bodoni Moda", "Bitstream Charter", "DejaVu Serif", Georgia, serif;
  --font-ui:        "Instrument Sans", "Carlito", "DejaVu Sans", Helvetica, Arial, sans-serif;
  --font-ar-display:"Amiri", "DejaVu Sans", serif;
  --font-ar-ui:     "IBM Plex Sans Arabic", "Tajawal", "DejaVu Sans", sans-serif;
  --font-num:       "Bodoni Moda", "Bitstream Charter", Georgia, serif;

  /* ---- Type scale (fluid; print overrides in kit.css) ---- */
  --t-hero:   clamp(3.2rem, 9vw, 7.5rem);
  --t-d1:     clamp(2.4rem, 5.5vw, 4.2rem);
  --t-d2:     clamp(1.8rem, 3.6vw, 2.75rem);
  --t-h3:     clamp(1.15rem, 2vw, 1.5rem);
  --t-body:   clamp(0.95rem, 1.15vw, 1.0625rem);
  --t-small:  0.8125rem;
  --t-micro:  0.625rem;

  --lh-tight: 1.02;
  --lh-head:  1.18;
  --lh-body:  1.62;

  --ls-hero:  -0.02em;
  --ls-caps:  0.24em;   /* letterspaced micro-caps — brand signature */
  --ls-caps-ar: 0;      /* Arabic never letterspaces */

  /* ---- Spacing (8pt rhythm) ---- */
  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 24px;  --sp-6: 32px;  --sp-7: 48px;  --sp-8: 64px;
  --sp-9: 96px;  --sp-10: 128px;

  /* ---- Layout ---- */
  --page-w:     210mm;
  --page-h:     297mm;
  --margin:     16mm;
  --max-w:      1200px;
  --gutter:     24px;

  /* ---- Lines & shape ---- */
  --hair:       0.5pt;
  --hair-px:    1px;
  --r-none:     0;
  --r-sm:       2px;
  --r-md:       4px;

  /* ---- Motion (web only) ---- */
  --ease:       cubic-bezier(.22,.61,.36,1);
  --dur:        .45s;
}

/* Breakpoints (documented for Elementor custom breakpoints)
   mobile   ≤ 767
   tablet   768 – 1024
   laptop   1025 – 1366
   desktop  ≥ 1367                                              */

/* ---- Arabic / RTL binding ---- */
[dir="rtl"], [lang="ar"]{
  --font-display: var(--font-ar-display);
  --font-ui:      var(--font-ar-ui);
  --ls-caps:      var(--ls-caps-ar);
  --ls-hero:      0;
}

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