/* =========================================================================
   Alrasly Consultancy — Design Tokens
   Brand law: CLAUDE.md §3 (tokens), §6 (type). Do not invent values.
   Spacing carries px units here (CLAUDE.md notes the scale is in px); the
   fluid type scale uses clamp() so headings/body scale smoothly (CLAUDE.md §6).
   ========================================================================= */
:root{
  /* ---- brand palette (CLAUDE.md §3/§4) ---- */
  --navy:#292561;        /* primary — dominant */
  --blue:#095BF4;        /* secondary + links */
  --purple-blue:#5546FA; /* tertiary — structural accent */
  --sky:#AEEAFD;         /* accent / FILL ONLY — never text on light */
  --ink:#2D2D2D;         /* default body text (not pure black) */
  --white:#FFFFFF;       /* base background */
  --offwhite:#FAFAFA;    /* surface / alt background */

  /* ---- interaction states ---- */
  --navy-hover:#231F52;  --navy-active:#1E1B46;
  --blue-hover:#084DCF;  --blue-active:#0642B0;
  --focus-ring:#095BF4;

  /* ---- type families (Latin = Manrope substitute for TT Hoves Pro) ---- */
  --font-latin:"Manrope",Arial,Helvetica,sans-serif;
  --font-arabic:"Noto Sans Arabic","Segoe UI",Tahoma,sans-serif;
  --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700;

  /* ---- spacing scale (px) ---- */
  --space-0:0;   --space-1:4px;  --space-2:8px;  --space-3:12px; --space-4:16px;
  --space-5:24px; --space-6:32px; --space-7:48px; --space-8:64px; --space-9:96px;

  /* ---- shape + logo (CLAUDE.md §2/§8) ---- */
  --radius:0;                 /* always */
  --logo-min-width:120px;     /* full lockup */
  --mark-min-size:24px;       /* symbol alone */
  --logo-gradient:linear-gradient(105deg,#095BF4 0%,#292561 100%);

  /* ---- layout (CLAUDE.md §7) ---- */
  --container-max:1040px;     /* content max-width */
  --container-pad:var(--space-4);
  --wide-max:1240px;          /* align-wide ceiling */

  /* ---- fluid type scale: clamp(mobile-min, preferred, desktop-max) (CLAUDE.md §6) ---- */
  --fs-display:clamp(2rem, 1.10rem + 4.5vw, 3rem);        /* 32 → 48 */
  --fs-h1:clamp(1.75rem, 1.05rem + 3.5vw, 2.5rem);        /* 28 → 40 */
  --fs-h2:clamp(1.5rem, 1.05rem + 2.25vw, 2rem);          /* 24 → 32 */
  --fs-h3:clamp(1.25rem, 1.05rem + 1.0vw, 1.5rem);        /* 20 → 24 */
  --fs-h4:clamp(1.125rem, 1.02rem + 0.5vw, 1.25rem);      /* 18 → 20 */
  --fs-body-lg:clamp(1rem, 0.97rem + 0.15vw, 1.125rem);   /* 16 → 18 */
  --fs-body:1rem;        /* 16 */
  --fs-small:0.875rem;   /* 14 */
  --fs-caption:0.75rem;  /* 12 */

  /* ---- line-heights (Latin; CLAUDE.md §6) ---- */
  --lh-display:1.1; --lh-h1:1.15; --lh-h2:1.2; --lh-h3:1.3; --lh-h4:1.35;
  --lh-body:1.55;   --lh-small:1.5; --lh-caption:1.45;

  /* ---- breakpoints (reference only; media queries can't read var()) ----
     tablet: 600px   desktop: 1040px */
}

/* Global square-corner law — never override (CLAUDE.md §2.1) */
*,*::before,*::after{ box-sizing:border-box; border-radius:0 !important; }

/* Arabic / RTL → swap to Arabic font stack; Arabic is never letter-spaced (CLAUDE.md §3/§6/§11) */
:lang(ar),[dir="rtl"]{ font-family:var(--font-arabic); letter-spacing:normal; }