/* ==========================================================================
   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 -----------------------------------------------------
     Taken from the clinic's logo: navy wordmark, red mark.

     The red is punctuation, never a surface. It belongs on the falaj node,
     the rule above a section heading, the active nav underline and the step
     numerals — and nowhere else. It must not land on a button or a large
     fill: a red call to action reads as an alert on a medical site.
     --------------------------------------------------------------------- */

  --c-ink:          #0B2137;   /* headings, dark surfaces */
  --c-ink-soft:     #3A4B5C;   /* body text */
  --c-ink-muted:    #6E7F8D;   /* captions, meta */

  --c-brand:        #123A5F;   /* primary — buttons, links, active states */
  --c-brand-deep:   #0B2740;   /* hover, pressed */
  --c-brand-wash:   #E8EFF5;   /* tinted backgrounds, chips */

  --c-accent:       #C1272D;   /* red — emphasis only, see the note above */
  --c-accent-wash:  #FBEDED;

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

  --c-error:        #B3261E;
  --c-error-wash:   #FBEAE8;   /* focus ring behind a field in error */
  --c-success:      #1E6F5C;

  /* Text and glyphs that sit ON a dark or brand-coloured surface.
     Without these, pages reach for a bare #fff and the palette stops
     being the single source of truth. */
  --c-on-brand:     #FFFFFF;              /* on --c-brand */
  --c-on-dark:      #FFFFFF;              /* on --c-ink */
  --c-on-dark-soft: rgb(255 255 255 / .74); /* secondary text on --c-ink */
  --c-on-dark-line: rgb(255 255 255 / .13); /* dividers on --c-ink */

  /* Ink as bare channels, so shadows and scrims follow a palette swap
     instead of staying tinted with the colour they were authored in. */
  --shadow-rgb:     11 33 55;
  --c-scrim:        rgb(var(--shadow-rgb) / .4);   /* behind the mobile menu */
  --c-lb-ground:    rgb(var(--shadow-rgb) / .94);  /* behind a full-screen image */

  /* Veil over the homepage banner photo. Never drops below 82% ink: against
     the worst case a photo can present — a blown-out white frame — that
     leaves white text at 9.3:1 and --c-on-dark-soft at 5.9:1, both clear of
     the 4.5:1 floor. Lightening any stop breaks that guarantee. */
  --c-hero-veil: linear-gradient(160deg,
                   rgb(var(--shadow-rgb) / .92) 0%,
                   rgb(var(--shadow-rgb) / .82) 60%,
                   rgb(var(--shadow-rgb) / .88) 100%);

  /* --- FIXED BRAND COLOURS ------------------------------------------------
     WhatsApp's own palette. These are NOT ours to restyle and are excluded
     from any palette swap — leave them exactly as they are when switching
     the block below.
     --------------------------------------------------------------------- */

  --c-whatsapp:      #25D366;   /* the brand green — button and float fill */
  --c-whatsapp-ink:  #06301A;   /* label on top of the green */
  --c-whatsapp-deep: #128C5B;   /* green legible on a light surface */
  --c-whatsapp-icon: #FFFFFF;   /* glyph inside the float */

  /* --- PREVIOUS PALETTE (falaj green / brass) -----------------------------
     What the site used before the logo assets arrived: Al Ain oasis green
     with brass from the fort doors. Kept for reference — to go back, comment
     out the block above and uncomment this one. Nothing else needs changing,
     because the on-dark, scrim and shadow tokens all derive from what is set
     here. Leave the four --c-whatsapp-* values alone: they are WhatsApp's.

     --c-ink: #14261F;  --c-ink-soft: #3A4A43;  --c-ink-muted: #6B7A73;
     --c-brand: #1E6F5C;  --c-brand-deep: #14503F;  --c-brand-wash: #E7F1ED;
     --c-accent: #C08A3E;  --c-accent-wash: #F7EFE1;
     --c-bg: #F7F9F8;  --c-surface: #FFFFFF;  --c-line: #DFE6E2;
     --shadow-rgb: 20 38 31;
     --------------------------------------------------------------------- */


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

  /* Archivo, not a serif: the logo is a bold condensed sans and a display
     serif fights it. The fallback is a sans too, so a slow font load does
     not reflow from serif to sans mid-paint. */
  --font-display: "Archivo", system-ui, sans-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 rgb(var(--shadow-rgb) / .06), 0 2px 8px rgb(var(--shadow-rgb) / .04);
  --shadow-md:   0 4px 12px rgb(var(--shadow-rgb) / .07), 0 12px 32px rgb(var(--shadow-rgb) / .06);
  --shadow-lift: 0 8px 20px rgb(var(--shadow-rgb) / .10), 0 24px 56px rgb(var(--shadow-rgb) / .08);
  --shadow-bar:  0 -2px 16px rgb(var(--shadow-rgb) / .07);   /* upward, for the mobile action bar */


  /* --- 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 */

  /* Distance from the top of the viewport to the bottom of the fixed
     chrome. Equals the header on its own; the offer bar adds to it when
     one is running. Anything that positions against the header reads
     this, not --header-h. */
  --header-offset: var(--header-h);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    /* Delays too, not just durations. A stagger built from transition-delay
       survives a zeroed duration and would still hold text back from being
       readable — which is the one thing reduced motion must never do. */
    animation-delay: 0s !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
}