/* ==========================================================================
   MultiServe — design tokens

   One file for the landing page (site/) and the product (app/).

   LIGHT is the default for both — a product decision 2026-09-11, recorded in
   دليل الهوية and مرجع التصميم. Deep Space Aurora (§04) is the
   dark theme a visitor can choose; pages opt into light with
   data-theme="light" on <html>.

   Note the cascade below: the unqualified :root block carries the DARK
   values, so a page without data-theme="light" renders dark.

   Gradient stops: §05 records the 2026-08-31 resolution that the traced
   symbol carries #A755F9 → #5670F3 → #22CEF2, and that these are the
   operative values for the whole brand — the older four-stop Aurora values
   in the Brand Foundation Brief are superseded. Three stops, 135°.
   ========================================================================== */

:root {
  /* ---- Brand constants — identical in every theme ---------------------- */
  --g1: #a755f9; /* Signal Violet */
  --g2: #5670f3; /* Core Indigo   */
  --g3: #22cef2; /* Live Cyan     */
  --brand-gradient: linear-gradient(135deg, var(--g1) 0%, var(--g2) 50%, var(--g3) 100%);
  --brand-gradient-soft: linear-gradient(
    135deg,
    rgba(167, 85, 249, 0.16) 0%,
    rgba(86, 112, 243, 0.16) 50%,
    rgba(34, 206, 242, 0.16) 100%
  );

  /* Indigo scale (دليل الهوية) — interactive fills in both themes */
  --i50: #f1f4fe;
  --i100: #e5e9fd;
  --i200: #ccd4fb;
  --i300: #aab8f9;
  --i400: #8094f6;
  --i500: #5670f3;
  --i600: #495fcf;
  --i700: #3c4eaa;
  --i800: #2b387a;
  --i900: #1a2249;

  /* Neutral scale (دليل الهوية) */
  --n0: #ffffff;
  --n50: #f7f8fc;
  --n100: #eef0f7;
  --n200: #e2e5f0;
  --n300: #c9cedf;
  --n400: #a0a7c0;
  --n500: #8a91ac;
  --n600: #6b7290;
  --n700: #4a5170;
  --n800: #232a44;
  --n900: #101526;
  --n950: #080b18;

  /* Semantic (دليل الهوية) */
  --success: #12a870;
  --warning: #df9a2b;
  --error: #d7452f;
  --info: #22cef2;

  /* Semantic surfaces — دليل الهوية: every semantic colour ships as
     base / surface / border / text. Base above; the rest here (light values;
     dark overrides below). State is never colour alone: pair with text or icon. */
  --success-surface: #e7f7f0;
  --success-border: #a8e2cc;
  --success-text: #0b7a50;
  --warning-surface: #fbf1de;
  --warning-border: #f0d49a;
  --warning-text: #8a5a10;
  --error-surface: #fbe8e5;
  --error-border: #f2b8b0;
  --error-text: #9a2f20;
  --info-surface: #e3f7fc;
  --info-border: #a9e6f4;
  --info-text: #0b6f85;

  /* ---- Spacing — 4px base (دليل الهوية) ------------------------------ */
  --space-4xs: 4px;
  --space-3xs: 8px;
  --space-2xs: 12px;
  --space-xs: 16px;
  --space-sm: 20px;
  --space-md: 24px;
  --space-lg: 32px;
  --space-xl: 40px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 80px;
  --space-5xl: 96px;
  --space-6xl: 128px;

  /* ---- Radius --------------------------------------------------------- */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --radius-full: 999px;

  /* ---- Type (دليل الهوية) -------------------------------------------- */
  --font-ui: 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --font-arabic: 'IBM Plex Sans Arabic', 'Segoe UI', Tahoma, sans-serif;
  --font-data: 'IBM Plex Mono', 'SF Mono', Menlo, Consolas, monospace;

  --text-display: 56px;
  --leading-display: 60px;
  --track-display: -0.02em;
  --text-h1: 40px;
  --leading-h1: 46px;
  --track-h1: -0.015em;
  --text-h2: 32px;
  --leading-h2: 40px;
  --track-h2: -0.01em;
  --text-h3: 24px;
  --leading-h3: 32px;
  --track-h3: -0.005em;
  --text-h4: 20px;
  --leading-h4: 28px;
  --text-lead: 20px;
  --leading-lead: 32px;
  --text-body-l: 18px;
  --leading-body-l: 30px;
  --text-body: 16px;
  --leading-body: 26px;
  --text-body-s: 14px;
  --leading-body-s: 22px;
  --text-caption: 12px;
  --leading-caption: 18px;
  --text-button: 15px;
  --leading-button: 16px;
  --track-button: 0.01em;
  --text-label: 12px;
  --leading-label: 16px;
  --track-label: 0.14em;
  --text-micro: 11px;
  --leading-micro: 14px;
  --track-wordmark: 0.055em;
  /* Latin display weight; Arabic overrides it at the end of this file */
  --weight-display: 700;

  /* ---- Motion --------------------------------------------------------- */
  --ease: cubic-bezier(0.2, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --motion-fast: 140ms var(--ease);
  --motion-base: 220ms var(--ease);
  --motion-slow: 420ms var(--ease-out);

  /* ---- Layout (دليل الهوية) ------------------------------------------ */
  --content-max: 1200px;
  --column-max: 640px;
  --margin-page: 64px;
  --gutter: 24px;

  /* ---- WhatsApp — its own identity, never mixed with the brand -------- */
  --wa-header: #075e54;
  --wa-canvas: #efeae2;
  --wa-bubble-in: #ffffff;
  --wa-bubble-out: #dcf8c6;
  --wa-text: #111b21;
  --wa-meta: #667781;
  --wa-tick: #53bdeb;
  --wa-composer: #f0f2f5;
  --wa-send: #00a884;
}

/* ==========================================================================
   THEME — DARK (default for this page, per دليل الهوية)
   Deep Space Aurora. Void is the ground; surfaces step up in luminance, not
   in shadow. Depth comes from luminance and hairlines.
   ========================================================================== */

:root,
:root[data-theme='dark'] {
  --void: #05060e;
  --surface-1: #0a0d1c;
  --surface-2: #111634;
  --surface-3: #171d42;
  --line: #1e2648;
  --line-strong: #2b3563;

  --text: #f2f4fa;
  --text-2: #b7bfdb;
  --mute: #8c97bc;
  --text-on-fill: #ffffff;

  --interactive: var(--i500);
  --interactive-fill: var(--i600);
  --interactive-hover: var(--i500);
  --focus-ring: 0 0 0 3px rgba(86, 112, 243, 0.45);

  /* Glow is the one atmospheric effect: light emitted by the platform,
     never a decorative blob. Always anchored to a real element. */
  --glow-brand: 0 0 0 1px rgba(86, 112, 243, 0.28), 0 24px 80px -24px rgba(86, 112, 243, 0.55);
  --glow-soft: 0 24px 64px -32px rgba(86, 112, 243, 0.4);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.4);
  --shadow-xl: 0 32px 80px rgba(0, 0, 0, 0.55);

  --grid-line: rgba(86, 112, 243, 0.07);
  --scrim: rgba(3, 4, 10, 0.72);
  --success-surface: rgba(18, 168, 112, 0.14);
  --success-border: rgba(18, 168, 112, 0.35);
  --success-text: #5fd3a6;
  --warning-surface: rgba(223, 154, 43, 0.14);
  --warning-border: rgba(223, 154, 43, 0.35);
  --warning-text: #f0c070;
  --error-surface: rgba(215, 69, 47, 0.14);
  --error-border: rgba(215, 69, 47, 0.35);
  --error-text: #f08a78;
  --info-surface: rgba(34, 206, 242, 0.12);
  --info-border: rgba(34, 206, 242, 0.35);
  --info-text: #7fe0f5;
  color-scheme: dark;
}

/* ==========================================================================
   THEME — LIGHT
   Designed, not inverted. Paper ground, ink text, the same gradient doing
   the same job with less luminance behind it.
   ========================================================================== */

:root[data-theme='light'] {
  --void: #f7f8fc;
  --surface-1: #ffffff;
  --surface-2: #ffffff;
  --surface-3: #f1f3fa;
  --line: #e2e5f0;
  --line-strong: #c9cedf;

  --text: #080b18;
  --text-2: #4a5170;
  --mute: #6b7290;
  --text-on-fill: #ffffff;

  --interactive: var(--i600);
  --interactive-fill: var(--i600);
  --interactive-hover: var(--i700);
  --focus-ring: 0 0 0 3px rgba(86, 112, 243, 0.28);

  --glow-brand: 0 0 0 1px rgba(86, 112, 243, 0.18), 0 24px 64px -28px rgba(86, 112, 243, 0.35);
  --glow-soft: 0 18px 48px -28px rgba(86, 112, 243, 0.28);
  --shadow-lg: 0 12px 32px rgba(8, 11, 24, 0.1);
  --shadow-xl: 0 24px 64px rgba(8, 11, 24, 0.14);

  --grid-line: rgba(86, 112, 243, 0.06);
  --scrim: rgba(8, 11, 24, 0.48);
  color-scheme: light;
}

/* ==========================================================================
   ARABIC TYPOGRAPHY — html[lang="ar"]
   Arabic letters join; any letter-spacing (negative or positive) breaks the
   joins and makes words look crushed or gappy. The tracking tokens above are
   Latin-only (Space Grotesk). Under Arabic every tracking token is 0, and
   leading is taller because Arabic glyphs sit lower and carry more vertical
   detail (IBM Plex Sans Arabic wants about 1.3-1.45 on headings, 1.7 on body).
   Display weight drops to 600: Plex Arabic 700 closes the counters at 56px.
   ========================================================================== */
html[lang='ar'] {
  --track-display: 0;
  --track-h1: 0;
  --track-h2: 0;
  --track-h3: 0;
  --track-button: 0;
  --track-label: 0;
  --leading-display: 72px;
  --leading-h1: 54px;
  --leading-h2: 44px;
  --leading-h3: 36px;
  --leading-h4: 30px;
  --leading-lead: 34px;
  --leading-body-l: 30px;
  --leading-body: 28px;
  --leading-body-s: 24px;
  --leading-caption: 20px;
  --leading-button: 24px;
  --weight-display: 600;
}