/* ==========================================================================
   ASMC — THEME TOKENS
   This is the ONLY file where colours, fonts and spacing are decided.
   Change a value here and it updates across the entire site.
   Do not put colours anywhere else.
   ========================================================================== */

:root {

  /* --- BRAND COLOURS -----------------------------------------------------
     Direction: Al Ain oasis. Falaj green (the irrigation channels the city
     is named for), brass from the fort doors, palm-shadow ink.
     --------------------------------------------------------------------- */

  --c-ink:          #14261F;   /* headings, dark surfaces */
  --c-ink-soft:     #3A4A43;   /* body text */
  --c-ink-muted:    #6B7A73;   /* captions, meta */

  --c-brand:        #1E6F5C;   /* primary — buttons, links, active states */
  --c-brand-deep:   #14503F;   /* hover, pressed */
  --c-brand-wash:   #E7F1ED;   /* tinted backgrounds, chips */

  --c-accent:       #C08A3E;   /* brass — used sparingly, for emphasis only */
  --c-accent-wash:  #F7EFE1;

  --c-bg:           #F7F9F8;   /* page background */
  --c-surface:      #FFFFFF;   /* cards, panels */
  --c-line:         #DFE6E2;   /* borders, dividers */

  --c-whatsapp:     #25D366;   /* WhatsApp brand — do not change */
  --c-error:        #B3261E;
  --c-success:      #1E6F5C;

  /* --- ALTERNATE PALETTE (clinic's existing blue) -------------------------
     If the clinic wants to keep their current identity, comment out the
     block above and uncomment this one. Nothing else needs to change.

     --c-ink: #0f172a;  --c-ink-soft: #1e3a5f;  --c-ink-muted: #546e7a;
     --c-brand: #0077b6;  --c-brand-deep: #00558c;  --c-brand-wash: #e0f2fe;
     --c-accent: #0ea5e9;  --c-accent-wash: #eff9ff;
     --c-bg: #f0f8ff;  --c-surface: #ffffff;  --c-line: #bfdbfe;
     --------------------------------------------------------------------- */


  /* --- TYPEFACES --------------------------------------------------------- */

  --font-display: "Fraunces", Georgia, serif;      /* headings only */
  --font-body:    "Karla", system-ui, sans-serif;  /* everything else */
  /* When Arabic is added, load "IBM Plex Sans Arabic" and set --font-body
     on [dir="rtl"] — see README. */


  /* --- TYPE SCALE --------------------------------------------------------
     Fluid: scales smoothly between mobile and desktop, no breakpoint jumps.
     --------------------------------------------------------------------- */

  --t-hero:  clamp(2.25rem, 1.4rem + 4.2vw, 4rem);
  --t-h1:    clamp(1.85rem, 1.3rem + 2.6vw, 2.9rem);
  --t-h2:    clamp(1.45rem, 1.15rem + 1.5vw, 2.1rem);
  --t-h3:    clamp(1.15rem, 1rem + 0.7vw, 1.4rem);
  --t-body:  1.0625rem;
  --t-small: 0.9375rem;
  --t-micro: 0.8125rem;

  --lh-tight: 1.12;
  --lh-head:  1.25;
  --lh-body:  1.65;

  --ls-eyebrow: 0.14em;


  /* --- SPACING ----------------------------------------------------------- */

  --s-1: 0.25rem;   --s-2: 0.5rem;    --s-3: 0.75rem;
  --s-4: 1rem;      --s-5: 1.5rem;    --s-6: 2rem;
  --s-7: 3rem;      --s-8: 4rem;      --s-9: 6rem;

  --section-y: clamp(3.5rem, 2rem + 7vw, 7rem);   /* vertical section rhythm */
  --gutter:    clamp(1.15rem, 0.6rem + 2.5vw, 2.5rem);
  --maxw:      1180px;
  --maxw-text: 68ch;


  /* --- SHAPE & DEPTH ------------------------------------------------------ */

  --r-sm: 6px;   --r-md: 12px;   --r-lg: 20px;   --r-pill: 999px;

  --shadow-sm:   0 1px 2px rgba(20,38,31,.06), 0 2px 8px rgba(20,38,31,.04);
  --shadow-md:   0 4px 12px rgba(20,38,31,.07), 0 12px 32px rgba(20,38,31,.06);
  --shadow-lift: 0 8px 20px rgba(20,38,31,.10), 0 24px 56px rgba(20,38,31,.08);


  /* --- MOTION ------------------------------------------------------------- */

  --ease:      cubic-bezier(.22,.61,.36,1);
  --dur-fast:  140ms;
  --dur:       260ms;


  /* --- LAYOUT CONSTANTS ---------------------------------------------------- */

  --header-h:     68px;
  --actionbar-h:  62px;   /* mobile bottom bar — reserved so it never covers content */
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}