/* ==========================================================================
   متى ألقاك — design tokens
   Sampled from the 2026 company profile: espresso ground #3B2E2C, brand rose
   #C98283, and the four-colour pointer set #D5A05D #C61C4B #27827D #13708F.
   ========================================================================== */

/* --- Arabic ------------------------------------------------------------- */
@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 Sans";
  src: url("../assets/fonts/ThmanyahSans-Black.woff2") format("woff2");
  font-weight: 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Thmanyah Display";
  src: url("../assets/fonts/ThmanyahSerifDisplay-Medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Thmanyah Display";
  src: url("../assets/fonts/ThmanyahSerifDisplay-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Thmanyah Display";
  src: url("../assets/fonts/ThmanyahSerifDisplay-Black.woff2") format("woff2");
  font-weight: 900; font-style: normal; font-display: swap;
}

/* --- Latin -------------------------------------------------------------- */
@font-face {
  font-family: "Archivo";
  src: url("../assets/fonts/Archivo-var.woff2") format("woff2-variations");
  font-weight: 400 700; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2122, U+2212;
}
@font-face {
  font-family: "Big Shoulders";
  src: url("../assets/fonts/BigShouldersDisplay-var.woff2") format("woff2-variations");
  font-weight: 400 800; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2122, U+2212;
}

:root {
  /* ---- ground & surface: warm espresso, straight off the profile ---- */
  --ink:        oklch(0.315 0.020 28);   /* #3B2E2C the deck's body colour */
  --ink-deep:   oklch(0.255 0.016 18);   /* #2A2020 for drenched bands     */
  --ink-raise:  oklch(0.368 0.021 23);
  --ink-high:   oklch(0.420 0.024 24);
  --ink-line:   oklch(0.470 0.026 25);

  /* ---- the brand rose ---- */
  --rose:       oklch(0.680 0.088 19);   /* #C98283 — fills, borders, large display */
  --rose-deep:  oklch(0.608 0.079 20);
  /* Rose as TEXT: the brand rose measures 4.34:1 on the ground, just under AA,
     so small copy uses this lifted step instead (6.4:1). */
  --rose-ink:   oklch(0.760 0.075 19);
  --rose-lift:  oklch(0.830 0.058 19);

  /* ---- type ---- */
  --bone:       oklch(0.957 0.009 45);   /* #F6EFEC */
  --blush:      oklch(0.928 0.013 17);   /* #F0E4E4 */
  --bone-2:     oklch(0.820 0.016 30);
  --bone-3:     oklch(0.750 0.020 30);   /* muted/hint text — clears 4.5:1 on ink and ink-raise */
  --rose-paper: oklch(0.520 0.120 20);   /* rose that stays legible on the light section */

  /* ---- the four pointers. Fills and shapes only: every one of these sits
          under 3:1 on the ground, so none may ever carry text. ---- */
  --gold:       oklch(0.742 0.105 72);   /* #D5A05D — also legible as text, 5.6:1 */
  --crimson:    oklch(0.537 0.200 13);   /* #C61C4B */
  --teal:       oklch(0.553 0.084 190);  /* #27827D */
  --blue:       oklch(0.510 0.093 227);  /* #13708F */

  /* ---- the light section ---- */
  --paper:      oklch(0.955 0.008 25);
  --paper-2:    oklch(0.905 0.012 25);
  --paper-ink:  oklch(0.300 0.020 28);
  --paper-ink-2:oklch(0.470 0.026 26);
  --paper-line: oklch(0.855 0.014 25);

  /* ---- state ---- */
  --ok:         oklch(0.720 0.130 155);
  --warn:       oklch(0.760 0.140 70);
  --stop:       oklch(0.640 0.190 25);

  /* ---- type families ---- */
  --f-ar:          "Thmanyah Sans", "Segoe UI", system-ui, sans-serif;
  --f-ar-display:  "Thmanyah Display", "Thmanyah Sans", Georgia, serif;
  --f-en:          "Archivo", "Segoe UI", system-ui, sans-serif;
  --f-en-display:  "Big Shoulders", "Archivo Narrow", "Archivo", sans-serif;

  --f-body:    var(--f-ar);
  --f-display: var(--f-ar-display);

  /* ---- fluid type scale, ratio ~1.3, display ceiling 5.6rem ---- */
  --t-xs:   0.75rem;
  --t-sm:   0.8125rem;
  --t-base: clamp(0.9375rem, 0.9rem + 0.18vw, 1.0625rem);
  --t-md:   clamp(1.0625rem, 1rem + 0.3vw,  1.25rem);
  --t-lg:   clamp(1.25rem,  1.1rem + 0.7vw, 1.75rem);
  --t-xl:   clamp(1.6rem,   1.3rem + 1.5vw, 2.5rem);
  --t-2xl:  clamp(2.1rem,   1.6rem + 2.4vw, 3.5rem);
  --t-3xl:  clamp(2.6rem,   1.8rem + 3.6vw, 5.6rem);

  /* ---- spacing ---- */
  --s-1:  0.25rem;
  --s-2:  0.5rem;
  --s-3:  0.75rem;
  --s-4:  1rem;
  --s-5:  1.5rem;
  --s-6:  2rem;
  --s-7:  3rem;
  --s-8:  4rem;
  --s-9:  6rem;
  --section:  clamp(4rem, 3rem + 6vw, 8.5rem);
  --section-t:clamp(2.5rem, 2rem + 4vw, 6rem);
  --gutter:   clamp(1.15rem, 0.6rem + 2.6vw, 3.5rem);
  --measure:  68ch;
  --shell:    82rem;
  --shell-wide: 96rem;

  /* ---- shape ---- */
  --r-1: 2px;
  --r-2: 4px;
  --r-3: 10px;
  --hair: 1px;

  /* ---- motion ---- */
  --ease:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:   cubic-bezier(0.7, 0, 0.84, 0);
  --d-1: 140ms;
  --d-2: 260ms;
  --d-3: 480ms;
  --d-4: 820ms;

  /* ---- depth ---- */
  --lift-1: 0 1px 2px oklch(0.16 0.01 25 / 0.45);
  --lift-2: 0 14px 34px -14px oklch(0.12 0.01 25 / 0.7);
  --lift-3: 0 34px 78px -26px oklch(0.10 0.01 25 / 0.85);

  /* ---- semantic z scale ---- */
  --z-base:      0;
  --z-raise:     10;
  --z-sticky:    100;
  --z-header:    200;
  --z-drawer:    300;
  --z-backdrop:  400;
  --z-modal:     500;
  --z-toast:     600;
  --z-tooltip:   700;
}

/* The deck floats translucent brown panels over full-bleed photography.
   That scrim is the single most recognisable move in the profile. */
:root {
  --scrim:      oklch(0.315 0.020 28 / 0.88);
  --scrim-soft: oklch(0.315 0.020 28 / 0.72);
  --dots: radial-gradient(circle at center, oklch(1 0 0 / 0.05) 0.9px, transparent 1px);
  --dots-size: 13px 13px;
}