/* ==========================================================================
   Raqeeb — design tokens
   Values taken verbatim from the Raqeeb Brand Kit as used in the
   "Raqeeb Showcase" design-canvas prototype.
   ========================================================================== */

:root {
  /* --- surfaces --------------------------------------------------------- */
  --bg:            #000F1B;   /* page ground                                */
  --bg-deep:       #00060D;   /* inset wells: textareas, inputs, tiles      */
  --navy:          #002645;   /* utility strip, panel gradients             */
  --navy-2:        #001A30;   /* second stop of navy gradients              */
  --navy-3:        #00172B;

  /* --- brand spectrum --------------------------------------------------- */
  --cyan:          #1CC4E9;   /* primary accent                             */
  --cyan-lt:       #63D9F3;   /* hover / lift                               */
  --cyan-dk:       #17A9E0;
  --royal:         #1475CE;   /* L2 · edge & security                       */
  --royal-dk:      #1055A2;
  --royal-lt:      #2E86D8;   /* L6 · infrastructure                        */
  --magenta:       #F02091;   /* L3 · trust boundary, alerts                */
  --magenta-tint:  #FF9EC8;   /* readable error text on dark surfaces       */
  --wine:          #C4185F;   /* L4 · data layer                            */
  --wine-dk:       #930A42;
  --lime:          #A7D438;   /* L5 · integration, "healthy" signals        */
  --lime-dk:       #2D7E12;
  --steel:         #194A66;   /* scrollbar thumb, marquee separators        */

  /* --- type ------------------------------------------------------------- */
  --ink:           #FFFFFF;
  --ink-1:         #E6F0F8;   /* body default                               */
  --ink-2:         #E4EEF6;
  --ink-3:         #C3D6E4;
  --ink-4:         #A9BDCC;
  --ink-5:         #97ADBE;   /* long-form muted copy                       */
  --ink-6:         #8FA4B5;
  --ink-7:         #83A0B5;
  --ink-8:         #7A8E9C;
  --ink-9:         #68849C;
  --ink-10:        #576F82;
  --ink-11:        #465F72;
  --ink-12:        #3E5266;   /* placeholder / empty-state text             */
  --ink-sky:       #7EA9C6;
  --ink-royal:     #4E9BE8;

  /* --- hairlines & washes ----------------------------------------------- */
  --line:          rgba(255,255,255,.10);
  --line-soft:     rgba(255,255,255,.07);
  --line-softer:   rgba(255,255,255,.06);
  --line-strong:   rgba(255,255,255,.16);
  --line-stronger: rgba(255,255,255,.22);
  --wash:          rgba(255,255,255,.045);
  --wash-soft:     rgba(255,255,255,.03);
  --wash-mid:      rgba(255,255,255,.05);
  --wash-strong:   rgba(255,255,255,.06);

  --cyan-wash:     rgba(28,196,233,.09);
  --cyan-wash-2:   rgba(28,196,233,.13);
  --cyan-wash-3:   rgba(28,196,233,.16);
  --cyan-edge:     rgba(28,196,233,.30);
  --cyan-edge-2:   rgba(28,196,233,.42);
  --cyan-edge-3:   rgba(28,196,233,.60);

  /* --- card surfaces (repeated gradients) -------------------------------- */
  --card:          linear-gradient(158deg, rgba(255,255,255,.055), rgba(255,255,255,.015));
  --card-lift:     linear-gradient(158deg, rgba(255,255,255,.06),  rgba(255,255,255,.02));
  --card-navy:     linear-gradient(120deg, rgba(0,38,69,.9), rgba(0,23,43,.9));
  --card-cyan:     linear-gradient(150deg, rgba(28,196,233,.12), rgba(20,117,206,.05));

  /* --- geometry --------------------------------------------------------- */
  --r-sm:  10px;
  --r-md:  14px;
  --r-lg:  18px;
  --r-xl:  22px;
  --r-2xl: 24px;
  --r-pill: 100px;

  --shell:      1500px;  /* standard section max-width                      */
  --shell-wide: 1560px;  /* flow + architecture                             */
  --shell-mid:  1400px;  /* contact                                         */
  --shell-narrow: 1080px;/* FAQ                                             */
  --gutter:     64px;
  --sec-y:      130px;   /* standard vertical section rhythm                */

  /* --- motion ----------------------------------------------------------- */
  --ease: cubic-bezier(.22,1,.36,1);

  /* --- type families ----------------------------------------------------- */
  --font: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-ar: 'Cairo', 'Poppins', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* Arabic / RTL swaps the body face; every layout rule below uses logical
   properties so the mirror is automatic. */
[dir="rtl"] body { font-family: var(--font-ar); }