/* ==========================================================================
   Design tokens — Mohamed J Shareeda
   Warm sand editorial. Every colour, size and timing used anywhere in the
   site is declared here. Change a value once and it changes everywhere.
   ========================================================================== */

:root {
  /* --- Colour ------------------------------------------------------------
     Sand ground pulled warm so the studio backdrop in the portrait blends
     into the page. Copper accent is taken from the red shemagh. */
  --sand-50: #fbf8f3;
  --sand-100: #f7f3ec;
  --sand-200: #efe8dc;
  --sand-300: #e2d8c7;
  --sand-400: #cdbfa8;

  --ink: #1a1815;
  --ink-soft: #57514a;
  /* Measured, not eyeballed: 5.05:1 on --sand-100, 5.27:1 on --sand-50 and
     4.59:1 on --sand-200. It carries small text such as the row numbers, so
     it has to clear 4.5:1 on every surface it sits on. */
  --ink-faint: #6e675d;

  /* copper is 4.54:1 on --sand-100 — fine for the name, the monogram and
     rules. copper-deep (6.79:1) carries anything at body size or smaller. */
  --copper: #b45309;
  --copper-deep: #8a3f07;

  --focus-ring: var(--copper-deep);

  /* --- Typography --------------------------------------------------------
     Playfair Display carries Latin headings; Alexandria carries all body
     copy in both languages, and all Arabic headings. */
  --font-display: "Playfair Display", "Iowan Old Style", Georgia, serif;
  --font-body: "Alexandria", system-ui, -apple-system, "Segoe UI", sans-serif;

  --weight-body: 300;
  --weight-medium: 500;
  --weight-bold: 700;

  /* Fluid scale — min at 360px, max at ~1440px */
  --text-xs: clamp(0.7rem, 0.68rem + 0.1vw, 0.75rem);
  --text-sm: clamp(0.8rem, 0.77rem + 0.15vw, 0.875rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-lede: clamp(1.125rem, 1rem + 0.55vw, 1.4rem);
  --text-heading: clamp(1.75rem, 1rem + 2.5vw, 3rem);
  /* Max is capped at 7rem so "Mohamed J" — the longest line — still sets on
     one line inside the hero text column at every viewport width. */
  --text-display: clamp(2.75rem, 1rem + 7vw, 7rem);

  --leading-tight: 0.95;
  --leading-snug: 1.25;
  --leading-body: 1.75;

  --tracking-display: -0.02em;
  --tracking-label: 0.12em;

  --measure: 34rem;

  /* --- Space ------------------------------------------------------------- */
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-section: clamp(4.5rem, 3rem + 6vw, 10rem);

  /* --- Layout ------------------------------------------------------------ */
  --maxw: 78rem;
  --gutter: clamp(1.25rem, 4vw, 4.5rem);
  --header-h: 4.5rem;

  /* --- Shape ------------------------------------------------------------- */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-pill: 999px;
  --hairline: 1px solid var(--sand-300);

  --shadow-lift: 0 18px 40px -24px rgba(26, 24, 21, 0.5);

  /* --- Motion ------------------------------------------------------------ */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-soft: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 180ms;
  --dur: 380ms;
  --dur-slow: 900ms;
}

/* --- Arabic overrides ----------------------------------------------------
   Alexandria replaces Playfair for display (Playfair has no Arabic).
   Arabic needs more leading, no letterspacing, and a slightly smaller
   display size — Alexandria Bold reads larger than Playfair at equal px. */
html[lang="ar"] {
  --font-display: "Alexandria", system-ui, sans-serif;
  --text-display: clamp(2.25rem, 1rem + 5.6vw, 6rem);
  --text-heading: clamp(1.6rem, 1rem + 2.1vw, 2.6rem);
  --leading-tight: 1.28;
  --leading-body: 1.9;
  --tracking-display: 0;
  --tracking-label: 0;
  --weight-body: 300;
  --measure: 36rem;
}