/* Maktoob — design tokens (see 03-design-system.md) */
@font-face { font-family: 'Montserrat'; src: url('../fonts/montserrat-var.woff2') format('woff2'); font-weight: 300 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('../fonts/montserrat-var-italic.woff2') format('woff2'); font-weight: 400 600; font-style: italic; font-display: swap; }
@font-face { font-family: 'Newsreader'; src: url('../fonts/newsreader-var.woff2') format('woff2'); font-weight: 300 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Newsreader'; src: url('../fonts/newsreader-var-italic.woff2') format('woff2'); font-weight: 300 600; font-style: italic; font-display: swap; }
@font-face { font-family: 'Amiri'; src: url('../fonts/amiri-400-ar.woff2') format('woff2'); font-weight: 400; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F, U+060C, U+061B, U+061F; }
@font-face { font-family: 'Amiri'; src: url('../fonts/amiri-700-ar.woff2') format('woff2'); font-weight: 700; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F, U+060C, U+061B, U+061F; }
@font-face { font-family: 'Aref Ruqaa'; src: url('../fonts/ruqaa-400-ar.woff2') format('woff2'); font-weight: 400; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F; }
@font-face { font-family: 'Aref Ruqaa'; src: url('../fonts/ruqaa-700-ar.woff2') format('woff2'); font-weight: 700; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F; }

:root {
  /* brand (exact) */
  --ink: #2F3A56;
  --blue: #406D96;
  --sky: #A3CFE3;
  --mist: #D8E7E9;
  --stone: #E2E3DC;
  --red: #E2494E;
  --deep: #002938;
  --white: #FFFFFF;
  /* shades / tints of brand colours (states + contrast only) */
  --ink-2: #4A536A;
  --stone-50: #F1F1EE;
  --red-act: #CB4246;
  --red-act-press: #B53A3E;
  --deep-water: #164159;

  /* type */
  --f-ui: 'Montserrat', system-ui, sans-serif;
  --f-book: 'Newsreader', 'Amiri', Georgia, serif;
  --f-ar: 'Amiri', 'Newsreader', serif;
  --f-hand: 'Aref Ruqaa', 'Amiri', serif;

  --fs-xl: clamp(56px, 6.6vw, 108px);
  --fs-d: clamp(44px, 4.6vw, 68px);
  --fs-h2: clamp(36px, 3.4vw, 52px);
  --fs-h3: 24px;
  --fs-bl: 19px;
  --fs-b: 16px;
  --fs-s: 14px;
  --fs-label: 12.5px;

  /* space (4pt) */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px;
  --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px; --s11: 176px;

  --container: 1320px;
  --gutter: 24px;
  --side: clamp(24px, 4.2vw, 60px);

  /* section padding — one horizontal and one vertical value for every section on every page */
  --pad-x: var(--side);
  --pad-y: clamp(64px, 8vw, 128px);
  /* gap between stacked blocks inside a section (e.g. title → search → shelf) */
  --stack: clamp(28px, 5.3vh, 48px);

  /* shape */
  --r-xs: 4px; --r-sm: 6px; --r-md: 14px; --r-lg: 22px; --r-pill: 999px;
  --e1: 0 1px 2px rgb(47 58 86 / .08);
  --e2: 0 18px 40px -18px rgb(47 58 86 / .35);
  --e3: 0 30px 60px -20px rgb(0 41 56 / .45);

  /* motion */
  --t-micro: 160ms;
  --t-ui: 260ms;
  --t-reveal: 700ms;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-water: cubic-bezier(.45, 0, .55, 1);
}

/* Arabic UI face: Readex Pro (geometric, pairs with Montserrat). Book voice stays Amiri. */
@font-face { font-family: 'Readex Pro'; src: url('../fonts/readex-var-ar.woff2') format('woff2'); font-weight: 300 700; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }