/* ==========================================================================
   LawFiq — Design tokens
   Single source of truth for colour, type, space, motion.
   Nothing in this file renders anything; it only defines the system.
   ========================================================================== */

:root {

  /* --------------------------------------------------------------------
     Colour
     Navy is the brand's voice; royal blue is the only "do something" colour;
     gold is reserved for brand moments (logo, marks) — never for UI chrome.
     -------------------------------------------------------------------- */
  --color-navy:        #0B1F3A;  /* brand primary — headings, footer ground */
  --color-navy-deep:   #081627;  /* pressed/hover states on navy            */
  --color-action:      #1D4ED8;  /* royal blue — buttons, links             */
  --color-action-deep: #1A44BE;  /* action hover/pressed                    */
  --color-paper:       #FFFFFF;  /* page ground                             */
  --color-mist:        #F5F7FA;  /* quiet section ground                    */
  --color-ink:         #1C2A41;  /* body text on light (navy-derived)       */
  --color-ink-muted:   #4C5A74;  /* secondary text on light — AA on white   */
  --color-hairline:    #DFE4EC;  /* 1px rules on light                      */
  --color-hairline-navy: #223A5C; /* 1px rules on navy                      */
  --color-on-navy:     #F2F5F9;  /* primary text on navy                    */
  --color-on-navy-muted: #B9C4D6; /* secondary text on navy — AA           */
  --color-gold:        #A8873D;  /* brand gold on light backgrounds         */
  --color-gold-ink:    #7A6129;  /* gold for SMALL TEXT on light — AA 4.5:1 */
  --color-gold-bright: #C2A05A;  /* brand gold on navy backgrounds          */
  --color-error:       #B4232A;  /* form validation errors — AA on white    */

  /* Focus ring colour adapts to the surface (overridden on navy surfaces) */
  --focus-color: var(--color-navy);

  /* --------------------------------------------------------------------
     Typography
     English: Source Serif 4 (headings) + Inter (body).
     Arabic: Noto Naskh Arabic for both roles — weight does the work.
     Pages set --font-heading / --font-body; components never name a family.
     -------------------------------------------------------------------- */
  --font-serif:  "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-sans:   "Inter", -apple-system, "Segoe UI", Arial, sans-serif;
  /* Arabic system (final, Step 2): the exact mirror of the English
     serif+sans logic — Amiri for display (the Amiria Press naskh
     revival: scholarly authority, fine calligraphic contrast) and
     Almarai for body/UI (Boutros-designed, precise, quietly premium). */
  --font-arabic-display: "Amiri", "Traditional Arabic", "Times New Roman", serif;
  --font-arabic: "Almarai", "Segoe UI", Tahoma, Arial, sans-serif;

  --font-heading: var(--font-serif);
  --font-body:    var(--font-sans);

  /* Fluid type scale — calm at mobile, editorial at desktop */
  --text-2xs:     0.75rem;
  --text-xs:      0.8125rem;
  --text-sm:      0.875rem;
  --text-md:      clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --text-lg:      clamp(1.125rem, 1.06rem + 0.3vw, 1.25rem);
  --text-xl:      clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --text-2xl:     clamp(1.5rem, 1.34rem + 0.8vw, 1.875rem);
  --text-3xl:     clamp(1.75rem, 1.5rem + 1.25vw, 2.375rem);
  --text-4xl:     clamp(2.125rem, 1.75rem + 1.9vw, 3rem);
  --text-display: clamp(2.5rem, 1.9rem + 3vw, 4.25rem);

  --leading-tight: 1.15;
  --leading-snug:  1.3;
  --leading-body:  1.65;

  --tracking-caps: 0.08em;  /* uppercase eyebrows/labels (reset to 0 in RTL) */

  /* --------------------------------------------------------------------
     Space — 4px base. Use tokens, not arbitrary values.
     -------------------------------------------------------------------- */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* Section rhythm — one token so vertical rhythm stays consistent */
  --space-section: clamp(4rem, 3rem + 5vw, 7.5rem);

  /* --------------------------------------------------------------------
     Layout
     -------------------------------------------------------------------- */
  --width-content: 73rem;   /* standard page column (1168px)  */
  --width-prose:   42rem;   /* long-form reading measure       */
  --gutter: clamp(1.25rem, 4vw, 2.5rem);

  /* Breakpoints (reference only — CSS custom properties cannot drive
     media queries; keep these values in sync with the @media rules):
     sm 640px · md 768px · lg 1024px · xl 1280px                       */

  /* --------------------------------------------------------------------
     Edges — the plaque mark is a single square rule; the UI keeps
     square corners and hairline borders as its signature.
     -------------------------------------------------------------------- */
  --radius-none: 0;
  --radius-pill: 999px;      /* reserved for future tags/badges only */
  --hairline: 1px;

  /* --------------------------------------------------------------------
     Motion — restrained. Everything honours prefers-reduced-motion.
     -------------------------------------------------------------------- */
  --duration-fast: 150ms;
  --duration-base: 240ms;
  --duration-slow: 480ms;
  --ease-out:    cubic-bezier(0.22, 0.61, 0.21, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* --------------------------------------------------------------------
     Layers
     -------------------------------------------------------------------- */
  --z-header: 100;
  --z-nav-overlay: 200;
  --z-skip-link: 300;
}

/* --------------------------------------------------------------------
   Arabic page adjustments.
   Plex Sans Arabic needs a little extra leading over Inter's defaults;
   letter-spacing must never be applied to Arabic script.
   -------------------------------------------------------------------- */
html[lang="ar"] {
  --font-heading: "Amiri Display", "Traditional Arabic", "Times New Roman", serif; /* one Amiri file for all heading weights (see base.css) */
  --font-body:    var(--font-arabic);

  --leading-body: 1.85;
  --leading-tight: 1.5;   /* Amiri's deep descenders need air */
  --leading-snug: 1.65;
  --tracking-caps: 0;
}