/* ============================================================
   MARAKN — design tokens
   Direction A: "Connected Intelligence"
   Derived from the logo master (work/brand/MaraknLogo.png):
   the mark is exactly two flat colours plus anti-aliasing.
   ============================================================ */

:root {
  /* --- Brand, sampled from the 2000x1218 master ------------- */
  --gold:        #C49445;
  --teal:        #17B0A3;

  /* Tints/shades derived from those two only. No third hue. */
  --gold-700:    #9A7233;
  --gold-300:    #E0C593;
  --gold-100:    #F4E9D6;
  --teal-700:    #0E7A71;
  --teal-300:    #7FD3CB;
  --teal-100:    #DDF2EF;

  /* --- Ground & ink: warm light neutral, deep teal-ink ----- */
  --ground:      #FBF9F5;
  --surface:     #FFFFFF;
  --surface-alt: #F4F0E8;
  --ink:         #13211F;
  --ink-soft:    #46564F;   /* 7.39:1 on ground */
  --ink-faint:   #5F6E67;   /* 5.10:1 on ground — was #7D8B84 at 3.39:1, below AA */

  /* TEXT gold. The brand gold #C49445 is 2.60:1 on the ground and 2.74:1 on
     white — decorative only. Any gold that carries words uses this token.
     #8A6630 = 4.96:1 on ground, 5.22:1 on white. The logo, rules, arcs and
     diagram fills keep the true brand gold; only text is darkened. */
  --gold-text:   #8A6630;
  --danger:      #8A2F2F;   /* form errors — 8.3:1 on white, 7.9:1 on --ground */
  --rule:        #E4DCCE;

  /* --- Type: IBM Plex — Latin and Arabic are one family,
         which is what makes the bilingual pairing cohere ----- */
  --font-latin:  "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-arabic: "IBM Plex Sans Arabic", "Noto Sans Arabic", "Segoe UI", Tahoma, sans-serif;
  --font-mono:   "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Fluid scale */
  --t-xs:   clamp(0.75rem, 0.72rem + 0.15vw, 0.82rem);
  --t-sm:   clamp(0.875rem, 0.84rem + 0.18vw, 0.95rem);
  --t-base: clamp(1rem, 0.96rem + 0.22vw, 1.09rem);
  --t-lg:   clamp(1.15rem, 1.08rem + 0.35vw, 1.35rem);
  --t-xl:   clamp(1.4rem, 1.25rem + 0.7vw, 1.9rem);
  --t-2xl:  clamp(1.8rem, 1.5rem + 1.4vw, 2.8rem);
  --t-3xl:  clamp(2.2rem, 1.6rem + 2.8vw, 4.2rem);

  /* Arabic needs more leading than Latin at the same size */
  --lh-tight:  1.15;
  --lh-head:   1.22;
  --lh-body:   1.7;

  /* --- Space ------------------------------------------------ */
  --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;     --s-10: 8rem;

  --measure: 62ch;
  --page:    1240px;
  --radius:  2px;      /* the logo is hard-edged; keep corners crisp */
  --radius-lg: 4px;

  --shadow-sm: 0 1px 2px rgba(19,33,31,.06), 0 2px 8px rgba(19,33,31,.04);
  --shadow-md: 0 2px 6px rgba(19,33,31,.07), 0 12px 32px rgba(19,33,31,.07);

  --ease:      cubic-bezier(.22,.61,.36,1);
  --ease-out:  cubic-bezier(.16,.84,.44,1);   /* settles rather than snaps */
  --dur-fast:  180ms;
  --dur:       340ms;
  --dur-slow:  420ms;
  --dur-slide: 620ms;   /* hero transition; brief asked for 500-700ms */
}

/* Arabic sets slightly larger and looser: the script's x-height and
   counters need it to match the Latin's optical weight. */
[lang="ar"] {
  --t-base: clamp(1.05rem, 1rem + 0.25vw, 1.16rem);
  --lh-body: 1.85;
  --lh-head: 1.35;
}