/* ==========================================================================
   مركز النخبة: Design tokens
   The ONLY file in this project allowed to contain raw values.
   Every colour, font, size, space, radius, shadow and duration lives here.
   ========================================================================== */

:root {
  /* ---------- Colour ---------- */
  --navy-900: #0E1A3C;
  --navy-800: #122250;
  --navy-700: #16265C;   /* primary brand navy: taken from the logo */
  --navy-600: #1D2F6E;
  --navy-500: #24397F;
  --navy-100: #E6E9F2;

  --gold-600: #A87F26;
  --gold-500: #C69A3B;   /* brand gold: taken from the logo */
  --gold-400: #D4AE5C;
  --gold-300: #E3C173;
  --gold-100: #F5E9CE;

  --maroon-600: #8C2B2B; /* from the books in the logo: used sparingly */

  --cream-50: #F7F4EE;   /* page surface */
  --cream-100: #EFEAE0;
  --white: #FFFFFF;

  --ink: #14161C;
  --muted: #5B6375;
  --muted-light: #8A91A3;

  --whatsapp: #25D366;
  --whatsapp-hover: #3DDC79;
  --whatsapp-ink: #06301A;

  /* ---------- Semantic ---------- */
  --bg: var(--cream-50);
  --bg-elevated: var(--white);
  --bg-inverse: var(--navy-700);
  --text: var(--ink);
  --text-soft: var(--muted);
  --text-on-dark: #EDF0F7;
  --text-on-dark-soft: #AFB8CE;
  --accent: var(--gold-500);
  --border: rgba(20, 22, 28, .10);
  --border-on-dark: rgba(255, 255, 255, .14);
  --border-on-dark-strong: rgba(255, 255, 255, .28);

  /* طبقات شفافة متكرّرة */
  --scrim-1: rgba(255, 255, 255, .05);
  --scrim-2: rgba(255, 255, 255, .07);
  --scrim-3: rgba(255, 255, 255, .12);

  --gold-tint-hairline: rgba(198, 154, 59, .40);
  --gold-tint-soft: rgba(198, 154, 59, .14);
  --gold-tint-wash: rgba(198, 154, 59, .10);
  --gold-tint-border: rgba(198, 154, 59, .30);
  --gold-tint-hover: rgba(198, 154, 59, .50);
  --gold-focus-ring: 0 0 0 4px rgba(198, 154, 59, .18);

  --maroon-tint-wash: rgba(140, 43, 43, .07);
  --maroon-tint-field: rgba(140, 43, 43, .04);
  --maroon-tint-border: rgba(140, 43, 43, .28);

  --whatsapp-tint: rgba(37, 211, 102, .14);

  --gold-glow: rgba(198, 154, 59, .22);
  --header-bg: rgba(247, 244, 238, .82);
  --header-bg-stuck: rgba(247, 244, 238, .94);

  /* ---------- Type ---------- */
  --font-display: "Almarai", system-ui, sans-serif;
  --font-body: "IBM Plex Sans Arabic", system-ui, sans-serif;

  --fs-xs:  0.8125rem;                              /* 13px */
  --fs-sm:  0.9375rem;                              /* 15px */
  --fs-base: 1rem;                                   /* 16px: never smaller */
  --fs-md:  clamp(1.0625rem, 1rem + .35vw, 1.1875rem);
  --fs-lg:  clamp(1.1875rem, 1.05rem + .7vw,  1.375rem);
  --fs-xl:  clamp(1.4375rem, 1.2rem + 1.1vw,  1.875rem);
  --fs-2xl: clamp(1.75rem,  1.35rem + 1.9vw,  2.625rem);
  --fs-3xl: clamp(2.125rem, 1.5rem + 3vw,     3.75rem);

  --lh-tight: 1.28;
  --lh-snug: 1.5;
  --lh-base: 1.85;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-black: 800;

  /* ---------- Space ---------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;

  --gutter: var(--sp-5);
  --section-y: clamp(3.5rem, 2rem + 7vw, 6.5rem);
  --maxw: 1140px;
  --maxw-prose: 62ch;

  /* ---------- Radius ---------- */
  --r-sm: 8px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-full: 999px;

  /* ---------- Elevation ---------- */
  --shadow-sm: 0 1px 2px rgba(14, 26, 60, .06), 0 2px 8px rgba(14, 26, 60, .05);
  --shadow-md: 0 4px 12px rgba(14, 26, 60, .08), 0 12px 32px rgba(14, 26, 60, .08);
  --shadow-lg: 0 8px 24px rgba(14, 26, 60, .10), 0 24px 64px rgba(14, 26, 60, .12);

  /* ظلال الأزرار محايدة اللون عمداً: الظل الملوّن يجعل الزر يبدو كمصباح مضيء */
  --shadow-btn: 0 1px 2px rgba(14, 26, 60, .10), 0 2px 6px rgba(14, 26, 60, .10);
  --shadow-btn-hover: 0 4px 12px rgba(14, 26, 60, .16);

  /* ---------- Motion ---------- */
  --dur-fast: 150ms;
  --dur: 300ms;
  --dur-slow: 600ms;
  --dur-slower: 900ms;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);

  /* ---------- Layers ---------- */
  --z-decor: 0;
  --z-content: 1;
  --z-header: 50;
  --z-mobilebar: 60;

  /* سهم القائمة المنسدلة: يبقى هنا لأنه يحمل قيمة لون */
  --select-caret: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%2324397F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  /* ---------- Component ---------- */
  --header-h: 64px;
  --mobilebar-h: 76px;   /* الارتفاع الفعلي للشريط 73px + هامش أمان */
  --tap: 48px;
}