/* Design tokens — locked to the Qlean app palette.
 *
 * Background and surfaces match the mobile-app values so the site
 * feels like a continuation of the product rather than a separate
 * brand: bg #0d1014, surface #161b22, raised #1f242e, brand cyan
 * #13b5f3. The accent is used SPARINGLY — only on the logo, the
 * primary CTA pill, and one underline accent in the hero — to keep
 * the editorial restraint the references showed. */

:root {
  --brand: #13b5f3;
  --brand-strong: #0aa3df;
  --brand-soft: rgba(19, 181, 243, 0.10);

  --bg: #0d1014;
  --bg-2: #11151b;
  --surface: #161b22;
  --surface-2: #1f242e;
  --surface-3: #262d39;

  --line: rgba(255, 255, 255, 0.06);
  --line-2: rgba(255, 255, 255, 0.10);
  --line-strong: rgba(255, 255, 255, 0.18);

  --text-1: #ffffff;
  --text-2: #c3c9d5;
  --text-3: #8c93a3;
  --text-4: #5b6373;

  --danger: #ff5470;
  --danger-soft: rgba(255, 84, 112, 0.10);
  --success: #2ed391;

  /* Radii (deliberately small — premium / editorial) */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 18px;
  --r-xl: 28px;
  --r-pill: 999px;

  --shadow: 0 1px 0 rgba(255, 255, 255, 0.03) inset,
            0 30px 60px -28px rgba(0, 0, 0, 0.6);
  --shadow-lg: 0 1px 0 rgba(255, 255, 255, 0.04) inset,
               0 50px 120px -36px rgba(0, 0, 0, 0.85);
  --shadow-brand: 0 14px 50px -14px rgba(19, 181, 243, 0.35);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --t-fast: 140ms;
  --t-base: 240ms;
  --t-slow: 420ms;

  /* Fluid type — narrow ramp, editorial weight */
  --fs-eyebrow: clamp(0.72rem, 0.7rem + 0.08vw, 0.78rem);
  --fs-body:    clamp(0.95rem, 0.92rem + 0.18vw, 1.05rem);
  --fs-lead:    clamp(1.05rem, 1rem + 0.36vw, 1.22rem);
  --fs-h3:      clamp(1.2rem, 1.05rem + 0.6vw, 1.55rem);
  --fs-h2:      clamp(1.7rem, 1.3rem + 1.5vw, 2.6rem);
  --fs-h1:      clamp(2.4rem, 1.8rem + 3.2vw, 4.6rem);
  --fs-display: clamp(3rem, 2.2rem + 4.2vw, 6rem);

  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px;  --sp-8: 64px;
  --sp-9: 96px; --sp-10: 128px;

  --container: 1280px;
  --gutter: clamp(20px, 5vw, 56px);

  --z-loader: 1000;
  --z-header: 50;
  --z-drawer: 90;
}

:root {
  --font-ar: "Tajawal", "Helvetica Neue", Arial, sans-serif;
  --font-en: "Inter", "Helvetica Neue", Arial, sans-serif;
}
[lang="ar"], [lang="ar"] * { font-family: var(--font-ar); }
[lang="en"], [lang="en"] * { font-family: var(--font-en); }

/* The display family is the same as the body family but used at
 * weight 900 with tight tracking — feels like a sister face. */
.display-face { font-weight: 900; letter-spacing: -0.035em; }
[lang="ar"] .display-face { letter-spacing: -0.01em; }