/* =====================================================================
   ماسة المسافر | Masat Al-Musafer
   Design tokens — the single source of truth for colour, type, space,
   radius and shadow. Nothing below this file hard-codes a hex value.

   Palette brief (v1.1 — warmer, brighter):
     · Warm cream is the page ground, not grey.
     · Blue carries authority but is lifted toward daylight, and large
       blue areas are gradients with warmth at the horizon rather than
       flat navy — the visual language of Fajr over the Haram.
     · Gold is richer and used confidently for accents and ratings.
     · A soft palm-green sits alongside for Madinah, success states and
       variety, so the page is never only two hues.
   ===================================================================== */

:root {
  /* ---------------------------------------------------------------
     Brand blue — lifted toward daylight
     --------------------------------------------------------------- */
  --blue-50:  #f0f8fd;
  --blue-100: #dceffa;
  --blue-200: #b9dcf4;
  --blue-300: #82c2e9;
  --blue-400: #47a3d8;
  --blue-500: #2286c2;
  --blue-600: #176da2;
  --blue-700: #135b87;    /* primary actions */
  --blue-800: #0e476b;
  --blue-900: #0a3450;    /* headings, deep grounds */
  --blue-950: #072538;

  /* ---------------------------------------------------------------
     Sand / gold — richer and warmer
     --------------------------------------------------------------- */
  --sand-50:  #fdfaf3;
  --sand-100: #faf3e4;
  --sand-200: #f4e7cd;
  --sand-300: #ecd6ab;
  --sand-400: #dfbe80;
  --sand-500: #cfa257;    /* the accent */
  --sand-600: #b0843c;
  --sand-700: #8a662d;

  /* ---------------------------------------------------------------
     Palm green — Madinah, success, variety
     --------------------------------------------------------------- */
  --palm-50:  #eff9f4;
  --palm-100: #d7f0e3;
  --palm-200: #aee0c8;
  --palm-300: #74c9a5;
  --palm-400: #3fae82;
  --palm-500: #1f9268;
  --palm-600: #157554;
  --palm-700: #105c43;

  /* ---------------------------------------------------------------
     Warm neutrals — a hint of sand keeps greys from going cold
     --------------------------------------------------------------- */
  --ink-50:  #faf9f7;
  --ink-100: #f4f2ee;
  --ink-200: #e6e3dc;
  --ink-300: #cbc7bd;
  --ink-400: #9a958a;
  --ink-500: #6e6a61;
  --ink-600: #4f5a63;
  --ink-700: #364550;
  --ink-800: #1f313e;
  --ink-900: #12242f;

  --white: #ffffff;

  /* ---------------------------------------------------------------
     Feedback
     --------------------------------------------------------------- */
  --success-bg:     var(--palm-50);
  --success-border: var(--palm-200);
  --success:        var(--palm-500);
  --success-ink:    var(--palm-700);

  --warning-bg:     #fef6e7;
  --warning-border: #f6dcab;
  --warning:        #d98f1f;
  --warning-ink:    #8a5810;

  --danger-bg:      #fdefec;
  --danger-border:  #f6c2b8;
  --danger:         #cf4232;
  --danger-ink:     #8f281c;

  --info-bg:        var(--blue-50);
  --info-border:    var(--blue-200);
  --info:           var(--blue-600);
  --info-ink:       var(--blue-800);

  --star: #f0a92c;

  /* ---------------------------------------------------------------
     Semantic aliases — components reference these, never the raw ramp
     --------------------------------------------------------------- */
  --page-bg:        #fdfaf4;
  --surface:        var(--white);
  --surface-muted:  var(--ink-50);
  --surface-warm:   var(--sand-100);
  --surface-invert: var(--blue-900);

  --border:         var(--ink-200);
  --border-strong:  var(--ink-300);
  --border-warm:    var(--sand-300);

  --text:           var(--ink-900);
  --text-muted:     var(--ink-500);
  --text-soft:      var(--ink-400);
  --text-invert:    var(--white);
  --heading:        var(--blue-900);

  --primary:        var(--blue-700);
  --primary-hover:  var(--blue-800);
  --primary-soft:   var(--blue-50);
  --primary-ink:    var(--white);

  --accent:         var(--sand-500);
  --accent-hover:   var(--sand-600);
  --accent-soft:    var(--sand-200);
  --accent-ink:     var(--blue-950);

  --link:           var(--blue-600);
  --focus-ring:     var(--blue-400);

  /* ---------------------------------------------------------------
     Signature gradients.
     Any large coloured area uses one of these rather than a flat fill —
     that single change is most of the difference between "corporate
     navy slab" and something that feels like light on stone.
     --------------------------------------------------------------- */

  /* Dawn over the Haram: deep blue overhead, warmth at the horizon. */
  --grad-dawn:
    radial-gradient(120% 100% at 78% 108%, rgba(207, 162, 87, 0.55) 0%, rgba(207, 162, 87, 0) 58%),
    radial-gradient(90% 90% at 12% 0%, rgba(71, 163, 216, 0.45) 0%, rgba(71, 163, 216, 0) 62%),
    linear-gradient(168deg, var(--blue-950) 0%, var(--blue-800) 52%, var(--blue-700) 100%);

  /* Madinah: the same structure, palm-green at the horizon. */
  --grad-madinah:
    radial-gradient(120% 100% at 78% 108%, rgba(63, 174, 130, 0.50) 0%, rgba(63, 174, 130, 0) 58%),
    radial-gradient(90% 90% at 12% 0%, rgba(130, 194, 233, 0.38) 0%, rgba(130, 194, 233, 0) 62%),
    linear-gradient(168deg, var(--blue-950) 0%, var(--blue-800) 55%, var(--palm-700) 105%);

  /* Warm cream band for alternating sections. */
  --grad-sand:
    linear-gradient(135deg, var(--sand-50) 0%, var(--sand-100) 48%, var(--sand-200) 100%);

  /* Gold sweep for accent buttons and highlight chips. */
  --grad-gold:
    linear-gradient(135deg, var(--sand-400) 0%, var(--sand-500) 55%, var(--sand-600) 100%);

  /* Deep footer ground with a touch of light so it is not a black hole. */
  --grad-deep:
    radial-gradient(90% 120% at 85% 0%, rgba(23, 109, 162, 0.45) 0%, rgba(23, 109, 162, 0) 60%),
    linear-gradient(180deg, var(--blue-900) 0%, var(--blue-950) 100%);

  /* ---------------------------------------------------------------
     Typography
     --------------------------------------------------------------- */
  --font-ar: "IBM Plex Sans Arabic", "Noto Sans Arabic", "Segoe UI",
             "Helvetica Neue", system-ui, sans-serif;
  --font-en: "IBM Plex Sans", "Inter", -apple-system, BlinkMacSystemFont,
             "Segoe UI", Roboto, system-ui, sans-serif;
  --font-num: "IBM Plex Sans", ui-monospace, "SF Mono", Menlo, monospace;

  --text-xs:   0.75rem;    /* 12 */
  --text-sm:   0.8125rem;  /* 13 */
  --text-base: 0.9375rem;  /* 15 */
  --text-md:   1rem;       /* 16 */
  --text-lg:   1.125rem;   /* 18 */
  --text-xl:   1.375rem;   /* 22 */
  --text-2xl:  1.75rem;    /* 28 */
  --text-3xl:  2.25rem;    /* 36 */
  --text-4xl:  3rem;       /* 48 */
  --text-5xl:  3.75rem;    /* 60 */

  --leading-tight:  1.25;
  --leading-snug:   1.45;
  --leading-normal: 1.7;

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* ---------------------------------------------------------------
     Space — a 4px base scale
     --------------------------------------------------------------- */
  --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;

  /* ---------------------------------------------------------------
     Radius — softer than v1; corners carry a lot of the friendliness
     --------------------------------------------------------------- */
  --radius-xs:   6px;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   18px;
  --radius-xl:   26px;
  --radius-2xl:  34px;
  --radius-pill: 999px;

  /* ---------------------------------------------------------------
     Elevation — warm-tinted, never a cold grey drop shadow
     --------------------------------------------------------------- */
  --shadow-xs: 0 1px 2px rgba(63, 48, 28, 0.05);
  --shadow-sm: 0 1px 3px rgba(63, 48, 28, 0.07), 0 1px 2px rgba(63, 48, 28, 0.04);
  --shadow-md: 0 6px 16px rgba(63, 48, 28, 0.09), 0 2px 5px rgba(63, 48, 28, 0.05);
  --shadow-lg: 0 14px 34px rgba(43, 40, 30, 0.12), 0 5px 10px rgba(43, 40, 30, 0.05);
  --shadow-xl: 0 28px 60px rgba(30, 34, 40, 0.16), 0 8px 18px rgba(30, 34, 40, 0.06);
  --shadow-gold: 0 8px 22px rgba(176, 132, 60, 0.28);
  --shadow-blue: 0 8px 22px rgba(19, 91, 135, 0.24);
  --shadow-focus: 0 0 0 3px rgba(71, 163, 216, 0.38);

  /* ---------------------------------------------------------------
     Layout
     --------------------------------------------------------------- */
  --container:      1200px;
  --container-wide: 1360px;
  --container-narrow: 780px;

  --header-height:  76px;
  --sidebar-width:  264px;
  --sidebar-collapsed: 72px;

  /* ---------------------------------------------------------------
     Motion
     --------------------------------------------------------------- */
  --ease:      cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-back: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast: 120ms;
  --duration:      200ms;
  --duration-slow: 320ms;

  /* ---------------------------------------------------------------
     Stacking
     --------------------------------------------------------------- */
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-header:   300;
  --z-drawer:   400;
  --z-overlay:  500;
  --z-modal:    600;
  --z-toast:    700;
}

/* ---------------------------------------------------------------------
   Direction-aware helpers.
   The layout is built with CSS logical properties (margin-inline,
   inset-inline, padding-block…) so switching between Arabic and English
   needs no mirrored stylesheet — only these two variables flip.
   --------------------------------------------------------------------- */
[dir="rtl"] {
  --font: var(--font-ar);
  --flip: -1;
}

[dir="ltr"] {
  --font: var(--font-en);
  --flip: 1;
}

/* ---------------------------------------------------------------------
   Respect the visitor's motion preference.
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration: 0ms;
    --duration-slow: 0ms;
  }
}