/* ==========================================================================
   Yoosl — Design tokens
   Extracted from Figma: "Yoosl Website (Copy)" (file ifa9YDmZMQ4uKUeVuFqc2u)
   ========================================================================== */

/* --------------------------------------------------------------------------
   Thmanyah — the licensed families the Figma file is drawn in, self-hosted.
   Licence: assets/fonts/LICENSE.pdf (shipped next to the files it covers).

   Only the weights the stylesheets ask for are shipped: 400, 500 and 700.
   `font-weight: 600` appears twice in the CSS and has no file of its own --
   CSS font matching resolves a 600 request upwards to the 700 face, which is
   what the design shows there anyway.

   The urls are relative to THIS file, so they resolve the same for the Arabic
   pages at the root and the English ones under en/.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: "thmanyah sans";
  src: url("../assets/fonts/thmanyahsans-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "thmanyah sans";
  src: url("../assets/fonts/thmanyahsans-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "thmanyah sans";
  src: url("../assets/fonts/thmanyahsans-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "thmanyah serif display";
  src: url("../assets/fonts/thmanyahserifdisplay-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "thmanyah serif display";
  src: url("../assets/fonts/thmanyahserifdisplay-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "thmanyah serif display";
  src: url("../assets/fonts/thmanyahserifdisplay-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---- Brand ---- */
  --primary-500: #e56932;   /* Primary Color/500  — orange  */
  --secondary-500: #ece6d0; /* Secondry Color/500 — cream   */
  --tertiary-500: #1f2447;  /* Tertiary Color/500 — navy    */

  /* Brand tints/shades (derived — not in Figma, used for hover/active states) */
  --primary-600: #cf5726;
  --primary-400: #ee8557;
  --primary-100: #fbe4d9;
  --tertiary-600: #171b36;
  --tertiary-400: #343a63;

  /* ---- Neutrals ---- */
  --gray-50:  #f8fafc;
  --gray-100: #f1f5f9;
  --gray-200: #e2e8f0;
  --gray-400: #94a3b8;
  --gray-500: #64748b;
  --gray-800: #1e293b;
  --gray-900: #0f172a;
  --white: #ffffff;

  /* ---- Semantic ---- */
  --text-strong: var(--gray-900);
  --text-body: var(--gray-800);
  --text-muted: var(--gray-500);
  --text-faint: var(--gray-400);
  --text-on-dark: var(--white);
  --surface: var(--white);
  --surface-alt: var(--gray-50);
  --surface-cream: var(--secondary-500);
  --surface-dark: var(--tertiary-500);
  --border: var(--gray-100);
  --border-strong: var(--gray-200);

  /* ---- Typography ----
     `thmanyah serif display` / `thmanyah sans` are the licensed fonts used in
     the Figma file, self-hosted above, so the site renders in them for every
     visitor rather than only on a machine that happens to have them installed.
     The families after them are fallbacks for the brief swap window. */
  --font-display: "thmanyah serif display", "Almarai", "Noto Naskh Arabic", Georgia, serif;
  --font-sans: "thmanyah sans", "IBM Plex Sans Arabic", "Noto Sans Arabic", system-ui, -apple-system, sans-serif;

  /* Type scale — Figma text styles. Fluid: each step reaches its Figma value at
     exactly 1440px (the width the file is drawn at) and floors at 480px. */
  --fs-h1: clamp(2.25rem, 1.375rem + 2.9167vw, 4rem);      /* 36 -> 64 */
  --fs-h2: clamp(1.875rem, 1.3125rem + 1.875vw, 3rem);     /* 30 -> 48 */
  --fs-h3: clamp(1.625rem, 1.1875rem + 1.4583vw, 2.5rem);   /* 26 -> 40 */
  --fs-h4: clamp(1.375rem, 1.0625rem + 1.0417vw, 2rem);     /* 22 -> 32 */
  --fs-p2: clamp(1.125rem, 0.9375rem + 0.625vw, 1.5rem);   /* 18 -> 24 */
  --fs-p3: clamp(1rem, 0.875rem + 0.4167vw, 1.25rem);      /* 16 -> 20 */
  --fs-p4: 1rem;                                        /* 16 */
  --fs-p1: clamp(1.25rem, 0.875rem + 1.25vw, 2rem);            /* 20 -> 32 */
  --fs-p5: 0.75rem;                                     /* 12 */

  --lh-tight: 1.4;  /* every Figma text style uses 1.4 */
  --lh-body: 1.75;  /* long-form prose only */
  --fw-regular: 400;
  --fw-bold: 700;

  /* ---- Layout ---- */
  --container: 1248px;  /* content column width in Figma */
  --gutter: clamp(1.25rem, 0.5rem + 3vw, 6rem);  /* 20 -> 96px */

  /* ---- Radii ---- */
  --r-sm: 8px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-pill: 99px;

  /* ---- Elevation ---- */
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
  --shadow-md: 0 8px 24px rgba(15, 23, 42, .08);
  --shadow-lg: 0 24px 56px rgba(15, 23, 42, .12);
  --shadow-brand: 0 12px 32px rgba(229, 105, 50, .28);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --dur-fast: 160ms;
  --dur-base: 320ms;
  --dur-slow: 640ms;

  /* ---- Spacing (4px base) ---- */
  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 20px;  --sp-6: 24px;  --sp-8: 32px;  --sp-10: 40px;
  --sp-12: 48px; --sp-14: 56px; --sp-16: 64px; --sp-20: 80px;
  --sp-24: 96px; --sp-32: 128px;

  /* ---- Section rhythm ---- */
  --section-y: clamp(3rem, 1.5rem + 6vw, 7.5rem);  /* 48 -> 120px */

  --header-h: 66px;
}