/* ==========================================================================
   JamFix — design tokens
   --------------------------------------------------------------------------
   Brand hues are taken unchanged from the live site's own stylesheet
   (jamfix.ae/style.css, --teal / --navy / --gold / --gray-*), so this is the
   existing JamFix identity, not a new one.

   What changed, and why: 12 of 24 colour pairs on the live site fail WCAG 2.1
   AA. The brand teal #1a9e8c reaches only 3.33:1 against white, so a primary
   button with a white label and a teal link on white both fail. The fix keeps
   every brand hue and darkens it for text use only. Each --jf-ink-* and
   --jf-state-* value below was derived by holding the original hue and solving
   for >= 5:1, so the identity is intact and the text is readable.

   Measured ratios are recorded beside each token. Full audit:
   docs/design-decisions.md
   ========================================================================== */

:root {
  /* ---- Brand, unchanged from jamfix.ae ------------------------------------
     These carry the identity. Note the usage limit on each: a brand colour is
     not automatically a text colour. */
  --jf-teal:            #1a9e8c;  /* brand mark, fills, icons. On navy: 5.45:1 OK.
                                     Never a background for white text (3.33:1). */
  --jf-teal-dark:       #0d6d5f;  /* primary action background. White on it: 6.23:1 OK */
  --jf-teal-light:      #22c9b0;  /* decorative, on dark surfaces only.
                                     On navy: 8.68:1 OK. On white: 2.09:1 — never text. */
  --jf-navy:            #0a1628;  /* hero and footer ground. White on it: 18.13:1 OK */
  --jf-navy-light:      #112240;  /* raised surface on navy */
  --jf-gold:            #f5a623;  /* rating stars, badges. On navy: 8.95:1 OK.
                                     Never white text on it (2.03:1); use navy (8.95:1). */

  /* ---- Text colours derived from the brand hues ---------------------------
     Same hue, darkened until it passes on white. Use these for anything a
     visitor has to read. */
  --jf-ink-accent:      #147d6f;  /* teal hue 172 held. On white: 5.01:1 OK — links, accent text */
  --jf-ink:             #111827;  /* body text. On white: 17.74:1 OK */
  --jf-ink-soft:        #374151;  /* secondary text. On white: 10.31:1 OK */
  --jf-ink-muted:       #6b7280;  /* meta text on white only: 4.83:1 OK */
  --jf-ink-muted-tint:  #636976;  /* meta text on --jf-surface-tint: 5.00:1 OK
                                     (#6b7280 on the tint is 4.39:1 — fails) */

  /* ---- Surfaces ---------------------------------------------------------- */
  --jf-surface:         #ffffff;
  --jf-surface-tint:    #f3f4f6;  /* section banding, card ground */
  --jf-surface-dark:    #0a1628;  /* = navy, for inverted sections */

  /* ---- Lines ------------------------------------------------------------- */
  --jf-line:            #e5e7eb;  /* decorative dividers only — 1.2:1, not a control edge */
  --jf-line-strong:     #828ea1;  /* input and control borders. On white: 3.31:1 OK
                                     (WCAG 1.4.11 needs 3:1 for UI boundaries;
                                      the site's #d1d5db gives 1.47:1 — fails) */

  /* ---- State colours, each hue held from the live site -------------------- */
  --jf-state-success:   #017e66;  /* was #00b894 (2.54:1). Now white on it: 5.01:1 OK */
  --jf-state-error:     #d42d1c;  /* was #e74c3c (3.82:1). Now 5.01:1 OK, both directions */
  --jf-state-warning:   #f5a623;  /* gold surface — pair ONLY with --jf-navy text (8.95:1) */
  --jf-state-warning-ink: #9a6409; /* gold hue 37 held, for warning text on white: 5.01:1 OK */

  /* ---- Channel colours --------------------------------------------------- */
  --jf-whatsapp:        #25d366;  /* WhatsApp brand green. Label must be --jf-navy
                                     (9.14:1); white on it is 1.98:1 — fails */

  /* ---- Focus ------------------------------------------------------------- */
  --jf-focus:           #0d6d5f;
  --jf-focus-ring:      0 0 0 3px #ffffff, 0 0 0 5px var(--jf-focus);

  /* ---- Type -------------------------------------------------------------- */
  /* Cairo, by client decision, for both languages — one typeface across the
     whole site rather than pairing a separate Latin face with it. Confirmed
     from the Google Fonts API to serve a real `arabic` and `latin` subset at
     weights 400/600/800 before being specified here (see docs/status.md). */
  --jf-font-en: 'Cairo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --jf-font-ar: 'Cairo', 'IBM Plex Sans Arabic', 'Segoe UI', Tahoma, sans-serif;

  /* A monospace stack for measured values — temperatures, pressures, counts.
     Deliberately the system stack: it downloads nothing, and the readout
     detail on the hero and the figures in the spec strip are the one place the
     site shows what a technician actually reads off an instrument. */
  --jf-font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;

  /* Three weights per face, as the brief allows */
  --jf-weight-regular: 400;
  --jf-weight-semibold: 600;
  --jf-weight-bold: 800;

  /* Type scale, 1.250 (major third) off a 16px base, clamped for fluidity */
  --jf-text-xs:   0.75rem;   /* 12px — eyebrows, legal */
  --jf-text-sm:   0.875rem;  /* 14px — captions, meta */
  --jf-text-base: 1rem;      /* 16px — body */
  --jf-text-lg:   1.125rem;  /* 18px — lead paragraph */
  --jf-text-xl:   clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);    /* h4 */
  --jf-text-2xl:  clamp(1.5rem, 1.3rem + 0.9vw, 1.953rem);   /* h3 */
  --jf-text-3xl:  clamp(1.875rem, 1.5rem + 1.6vw, 2.441rem); /* h2 */
  --jf-text-4xl:  clamp(2.25rem, 1.6rem + 2.8vw, 3.815rem);  /* h1 / hero */

  /* Arabic needs more leading than Latin at the same size (brief §2) */
  --jf-leading-ar: 1.7;
  --jf-leading-en: 1.6;
  --jf-leading-tight: 1.15;  /* headings */

  --jf-tracking-label: 0.08em; /* uppercase eyebrows only */

  /* ---- Spacing, 4px base ------------------------------------------------- */
  --jf-space-1: 0.25rem;  /*  4px */
  --jf-space-2: 0.5rem;   /*  8px */
  --jf-space-3: 0.75rem;  /* 12px */
  --jf-space-4: 1rem;     /* 16px */
  --jf-space-5: 1.25rem;  /* 20px */
  --jf-space-6: 1.5rem;   /* 24px */
  --jf-space-8: 2rem;     /* 32px */
  --jf-space-12: 3rem;    /* 48px */
  --jf-space-16: 4rem;    /* 64px */
  --jf-space-24: 6rem;    /* 96px */
  --jf-space-32: 8rem;    /* 128px */

  /* Section rhythm: 48–64px on mobile, 96–128px on desktop (brief §2) */
  --jf-section-y: clamp(3rem, 2rem + 6vw, 8rem);
  --jf-gutter: clamp(1rem, 0.5rem + 2vw, 2rem);
  --jf-measure: 65ch;     /* running-text width */
  --jf-container: 1200px;

  /* ---- Radius -------------------------------------------------------------
     sm/md stay small (controls, inputs). lg and xl are the public-facing
     "soft, rounded, approachable" treatment: 20px on a standard card, 28px on
     a large panel (hero entry cards, the final CTA panel). Buttons stay pill. */
  --jf-radius-sm: 6px;
  --jf-radius-md: 12px;    /* controls, inputs, small chips */
  --jf-radius-lg: 20px;    /* cards: services, testimonials, before/after */
  --jf-radius-xl: 28px;    /* large panels: hero entry cards, mission/vision, CTA */
  --jf-radius-pill: 999px; /* buttons */

  /* ---- Shadows: soft and diffused, low opacity, large blur ---------------
     The live site's old --shadow-xl (0 20px 60px rgba(0,0,0,.3)) was far
     heavier than this. These stay under 0.14 alpha even at the largest size,
     so a shadow reads as depth, not as a dark smear. */
  --jf-shadow-sm: 0 1px 2px rgba(10, 22, 40, 0.06);
  --jf-shadow-md: 0 2px 8px rgba(10, 22, 40, 0.08);
  --jf-shadow-lg: 0 8px 24px rgba(10, 22, 40, 0.10);
  --jf-shadow-xl: 0 20px 48px rgba(10, 22, 40, 0.12);

  /* ---- Motion ------------------------------------------------------------
     Easing matches the live site's --transition so the new pages feel
     continuous with the old ones. */
  --jf-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --jf-duration-fast: 150ms;
  --jf-duration: 250ms;
  --jf-duration-slow: 450ms;
  --jf-tilt-max: 6deg;    /* service-card 3D tilt ceiling */
  --jf-perspective: 900px;

  /* ---- Layering ---------------------------------------------------------- */
  --jf-z-header: 100;
  --jf-z-float: 200;   /* WhatsApp / call float */
  --jf-z-admin: 250;   /* admin key button */
  --jf-z-modal: 300;
  /* The header is fixed over the page on every page (see .site-header in
     site.css) rather than sitting in normal flow, so it needs to clear
     everything below it, including its own mobile nav drawer. */
  --jf-z-header-fixed: 1000;
}

/* Every heavy motion token collapses when the visitor asks for less motion.
   Components read these, so one media query disables tilt, parallax and
   long transitions site-wide (brief §6). */
@media (prefers-reduced-motion: reduce) {
  :root {
    --jf-duration-fast: 1ms;
    --jf-duration: 1ms;
    --jf-duration-slow: 1ms;
    --jf-tilt-max: 0deg;
    --jf-perspective: none;
  }
}

/* --------------------------------------------------------------------------
   Direction-aware defaults
   The site is built with logical properties (margin-inline, padding-inline,
   inset-inline) so one stylesheet serves /ar/ (RTL) and /en/ (LTR) without a
   mirrored copy. These two rules set the font and leading per language; the
   lang attribute on <html> drives them.
   -------------------------------------------------------------------------- */
:where(html[lang^="ar"]) {
  font-family: var(--jf-font-ar);
  line-height: var(--jf-leading-ar);
}

:where(html[lang^="en"]) {
  font-family: var(--jf-font-en);
  line-height: var(--jf-leading-en);
}

/* Arabic numerals stay Western (٠١٢ vs 012) unless the client asks otherwise;
   phone numbers and prices are easier to verify against a licence this way. */
:where(html[lang^="ar"]) {
  font-variant-numeric: lining-nums;
}

/* --------------------------------------------------------------------------
   Arabic never takes letter-spacing.
   Arabic is a cursive script: positive tracking pulls the joins apart and
   negative tracking crowds them, and both make the word harder to read rather
   than tighter. The display tracking and the uppercase label tracking used on
   the Latin side are therefore cancelled here, once, rather than remembered at
   every call site. text-transform is also a no-op in Arabic, so the eyebrow
   labels simply render as written.

   Both languages render in Cairo now, but a font's Arabic and Latin
   character sets are drawn to different proportions within the same face —
   Cairo's Arabic reads visually larger and denser than its Latin at an
   identical px value — so the heading sizes below get a small downward
   nudge on the Arabic side to keep the two languages visually matched.
   -------------------------------------------------------------------------- */
html[lang^="ar"] {
  --jf-tracking-label: 0;
}

html[lang^="ar"] :is(h1, h2, h3, h4, .page-title, .section-title, .eyebrow, .logo) {
  letter-spacing: normal;
}

html[lang^="ar"] {
  --jf-text-3xl: clamp(1.4rem, 1.2rem + 0.85vw, 1.82rem);
  --jf-text-4xl: clamp(2.05rem, 1.5rem + 2.5vw, 3.45rem);
}