/* ==========================================================================
   ARDH ALMASHAREF — Design tokens (v4 · Minimal Corporate)
   Brand colours come ONLY from the official logo artwork:
     Navy #253646   ·   Mint #9CDBAE
   Every other colour is a tint or shade of these two.
   ========================================================================== */

/* Arial tuned to Inter's metrics: text wraps the same before and after the web font
   arrives, so the font swap causes no layout shift */
@font-face {
  font-family: "Inter Fallback";
  src: local("Arial"), local("ArialMT"), local("Helvetica"), local("Liberation Sans");
  size-adjust: 107.12%;
  ascent-override: 90.44%;
  descent-override: 22.52%;
  line-gap-override: 0%;
}

/* Tahoma widened to Readex Pro (measured 104.5% on the site copy), for the same reason */
@font-face {
  font-family: "Readex Fallback";
  src: local("Tahoma");
  size-adjust: 104.53%;
}

:root {
  /* Brand */
  --navy: #253646;
  --navy-deep: #16232f;
  --navy-ink: #0f1a23;
  --mint: #9cdbae;
  --mint-soft: #e6f4ea;
  --mint-ink: #2b7350;

  /* Type */
  --f-latin: "Inter", "Inter Fallback", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  --f-arabic: "Readex Pro", "Readex Fallback", "Inter", "Segoe UI", Tahoma, sans-serif;
  --f: var(--f-latin);

  --fs-h1: clamp(2.05rem, 1.45rem + 2.3vw, 3.5rem);
  --fs-h2: clamp(1.65rem, 1.3rem + 1.35vw, 2.5rem);
  --fs-h3: clamp(1.15rem, 1.06rem + 0.4vw, 1.4rem);
  --fs-lead: clamp(1.06rem, 1rem + 0.25vw, 1.2rem);
  --fs-body: 1rem;
  --fs-sm: 0.9rem;
  --fs-xs: 0.8rem;
  --fs-stat: clamp(1.9rem, 1.5rem + 1.5vw, 2.75rem);

  --w-regular: 400;
  --w-medium: 500;
  --w-semibold: 600;

  --lh-tight: 1.18;
  --lh-head: 1.25;
  --lh-body: 1.7;
  --track-head: -0.02em;

  /* Layout */
  --container: 1240px;
  --gutter: clamp(1.25rem, 0.8rem + 2vw, 2.5rem);
  --gap: clamp(1rem, 0.7rem + 1.2vw, 2rem);
  --section: clamp(4rem, 2.8rem + 5vw, 7rem);
  --section-sm: clamp(3rem, 2.2rem + 3.4vw, 5rem);
  --header: 76px;
  --radius: 14px;
  --radius-sm: 8px;

  /* Motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --t-fast: 0.2s;
  --t: 0.45s;
}

:root[dir="rtl"] {
  --f: var(--f-arabic);
  --lh-tight: 1.35;
  --lh-head: 1.45;
  --lh-body: 1.9;
  --track-head: 0;
}

/* Light (default) */
:root,
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #ffffff;
  --bg-alt: #f4f6f5;
  --surface: #ffffff;
  --ink: #15222d;
  --ink-2: #4a5866;
  --ink-3: #6a7782;
  --line: #e2e7e5;
  --line-2: #cdd5d2;
  --accent: #2b7350;
  --accent-soft: #e6f4ea;
  --btn-bg: #253646;
  --btn-fg: #ffffff;
  --btn-hover: #16232f;
  --plate: #ffffff;
  --header-bg: rgba(255, 255, 255, 0.85);
}

/* Dark */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0e1720;
  --bg-alt: #131f2a;
  --surface: #172430;
  --ink: #e8eeeb;
  --ink-2: #aab7c1;
  --ink-3: #8a98a3;
  --line: #22313e;
  --line-2: #33434f;
  --accent: #9cdbae;
  --accent-soft: rgba(156, 219, 174, 0.12);
  --btn-bg: #9cdbae;
  --btn-fg: #102028;
  --btn-hover: #b5e6c3;
  --plate: #f3f6f4;
  --header-bg: rgba(14, 23, 32, 0.85);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --bg: #0e1720; --bg-alt: #131f2a; --surface: #172430; --ink: #e8eeeb; --ink-2: #aab7c1; --ink-3: #8a98a3;
    --line: #22313e; --line-2: #33434f; --accent: #9cdbae; --accent-soft: rgba(156,219,174,.12);
    --btn-bg: #9cdbae; --btn-fg: #102028; --btn-hover: #b5e6c3; --plate: #f3f6f4; --header-bg: rgba(14,23,32,.85);
  }
}