/* =========================================================================
   tokens.css — the single source of truth for colour, radius and shadow.
   No hex value may appear anywhere outside this file.

   Palette extracted from the live UAE Government Portal (u.ae/style/css/style.css).
   Values marked [u.ae] are used verbatim by that site; values marked [derived]
   are tints/shades computed from them for states the source has no token for.
   ========================================================================= */

:root {
  /* ---- Surfaces ---- */
  --bg-page:        #F5F5F5;   /* [u.ae] page background            */
  --bg-surface:     #FFFFFF;   /* [u.ae] cards                      */
  --bg-subtle:      #FAFAFA;   /* [u.ae] hover rows, disabled input */

  /* ---- Text ---- */
  --text-primary:   #141414;   /* [u.ae] 18.9:1 on white — AAA      */
  --text-secondary: #4A4A4A;   /* [u.ae]  8.9:1 on white — AAA      */
  --text-muted:     #5F646D;   /* [u.ae]  6.0:1 on white — AA       */

  /* ---- Lines ---- */
  --border:         #E1E3E5;   /* [u.ae] hairlines                  */
  --border-strong:  #C3C6CB;   /* [u.ae] input hover                */

  /* ---- Brand / action ----
     Deep UAE red. The flag red (#EF3340) is only 4.0:1 on white and fails as
     text or as a button fill, so this is that hue darkened until it passes. */
  --primary:        #A32020;   /* 7.5:1 on white — AAA              */
  --primary-hover:  #841919;   /* [derived] shade of --primary      */
  --primary-soft:   #FBEAEA;   /* [derived] tint: focus ring, active*/
  --link:           #A32020;
  --accent-gold:    #9B6131;   /* [u.ae] 5.1:1 — never body text    */

  /* ---- Status ---- */
  --success:        #21633E;   /* [u.ae] green — no longer the brand,
                                  so it now reads purely as "success" */
  --success-soft:   #EBF4EF;   /* [u.ae]                            */
  --warning:        #9B6131;   /* [u.ae] gold reads as caution      */
  --warning-soft:   #F7F0E8;   /* [derived] tint of --accent-gold   */
  --danger:         #B3261E;   /* [derived] shade of u.ae #F44336,
                                  lightened source fails AA as text */
  --danger-soft:    #FDEDEC;   /* [derived]                         */

  /* ---- On-dark (footer sits on --primary) ---- */
  --on-dark:        #FFFFFF;   /* 7.5:1 on --primary — AAA          */
  --on-dark-dim:    #EDD9D9;   /* [derived] 5.6:1 on --primary — AA */
  --on-dark-line:   #BF4A4A;   /* [derived] hairline on --primary   */

  /* ---- Radius ---- */
  --radius:         4px;
  --radius-lg:      6px;

  /* ---- Overlay (modal scrim) ---- */
  --overlay:        rgba(20,20,20,0.50);

  /* ---- Shadow — floating layers only ---- */
  --shadow-pop:     0 2px 8px rgba(20,20,20,0.12);
  --shadow-modal:   0 8px 24px rgba(20,20,20,0.18);

  /* ---- Spacing scale: 4 / 8 / 12 / 16 / 24 / 32 / 40 only ---- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;

  /* ---- Type ----
     IBM Plex Sans Arabic — a UI-grade face that covers Arabic and Latin in
     one family. Self-hosted (see @font-face in style.css), so there is still
     no third-party request. Two weights only: 400 and 600. */
  --ff: "IBM Plex Sans Arabic", -apple-system, "Segoe UI", Roboto,
        "Helvetica Neue", "Noto Sans Arabic", "Dubai", Arial, sans-serif;

  --fw-regular: 400;
  --fw-bold:    600;   /* the spec's 500 and 600 collapse to one loaded weight */

  --fs-page-title: 30px;
  --fs-section:    18px;
  --fs-nav:        15px;
  --fs-body:       14px;
  --fs-label:      13px;
  --fs-meta:       12px;

  /* Documented exception to the type table: iOS Safari zooms the viewport when
     a focused field is under 16px. Touch widths use this, pointer widths use
     --fs-body (14px). Nothing else on the page uses it. */
  --fs-input-touch: 16px;

}

/* High-contrast preference — kept here so no hex lives outside this file. */
@media (prefers-contrast: more) {
  :root {
    --border:        #C3C6CB;
    --border-strong: #5F646D;
    --text-muted:    #4A4A4A;
  }
}