/* Garinto tokens: fonts, colour, type scale, space, motion. Spec §3. */

/* ---------- Fonts (self-hosted, subset; see README "Fonts"; licences in assets/fonts/OFL-*.txt) ---------- */
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../fonts/bricolage-latin.woff2") format("woff2");
  font-weight: 400 800; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("../fonts/instrument-sans-latin.woff2") format("woff2");
  font-weight: 400 600; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Reem Kufi";
  src: url("../fonts/reem-kufi-arabic.woff2") format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap;
  unicode-range: U+060C, U+061B, U+061F, U+0621-063A, U+0640-0655, U+066A-066D, U+0670-0671, U+067E, U+0686, U+06A4, U+06A9, U+06AD, U+06AF, U+06CC, U+06D4, U+200C-200F;
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  src: url("../fonts/plex-arabic-regular-arabic.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+060C, U+061B, U+061F, U+0621-063A, U+0640-0655, U+066A-066D, U+0670-0671, U+067E, U+0686, U+06A4, U+06A9, U+06AD, U+06AF, U+06CC, U+06D4, U+200C-200F;
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  src: url("../fonts/plex-arabic-medium-arabic.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
  unicode-range: U+060C, U+061B, U+061F, U+0621-063A, U+0640-0655, U+066A-066D, U+0670-0671, U+067E, U+0686, U+06A4, U+06A9, U+06AD, U+06AF, U+06CC, U+06D4, U+200C-200F;
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  src: url("../fonts/plex-arabic-semibold-arabic.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
  unicode-range: U+060C, U+061B, U+061F, U+0621-063A, U+0640-0655, U+066A-066D, U+0670-0671, U+067E, U+0686, U+06A4, U+06A9, U+06AD, U+06AF, U+06CC, U+06D4, U+200C-200F;
}

:root {
  /* ---------- Colour: the six spec tokens (§3, revised), verbatim ---------- */
  --chaux: #F6F6F2;   /* page background: neutral lime-wash white, never cream */
  --zellige: #05493A; /* brand surface, used boldly: bands, footer, primary actions */
  --menthe: #DCE8DF;  /* chips, quiet panels */
  --encre: #121412;   /* text */
  --terre: #B4532F;   /* small accents only: the root line, a price badge */
  --sol: #26201A;     /* below ground */

  /* Derived for legibility and states only (no new hues): */
  --encre-soft: color-mix(in oklab, var(--encre) 70%, var(--chaux));      /* secondary text */
  --line: color-mix(in oklab, var(--encre) 14%, transparent);             /* hairlines */
  --line-strong: color-mix(in oklab, var(--encre) 34%, transparent);   /* decorative borders only (ghost buttons) */
  --field-border: color-mix(in oklab, var(--encre) 48%, var(--chaux));      /* input/check boundaries: ≥ 3:1 on white and chaux (WCAG 1.4.11) */
  --field-placeholder: color-mix(in oklab, var(--encre) 58%, #fff);         /* placeholder text: ≥ 4.5:1 on the white field */
  --zellige-deep: color-mix(in oklab, var(--zellige) 80%, var(--encre));  /* pressed / hover */
  --zellige-lift: color-mix(in oklab, var(--zellige) 86%, var(--chaux));  /* hover on zellige surfaces */
  --chaux-soft: color-mix(in oklab, var(--chaux) 74%, var(--zellige));    /* secondary text on zellige */
  --chaux-soft-sol: color-mix(in oklab, var(--chaux) 70%, var(--sol));    /* secondary text on sol */
  --line-on-dark: color-mix(in oklab, var(--chaux) 20%, transparent);

  /* Surface roles (.section--zellige and .section--sol swap them) */
  --bg: var(--chaux);
  --fg: var(--encre);
  --fg-soft: var(--encre-soft);
  --rule: var(--line);
  --accent: var(--zellige);       /* links, focus, checked */

  /* ---------- Space (8-pt, with a 4 for tight UI) ---------- */
  --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.5rem;
  --sp-6: 2rem; --sp-7: 3rem; --sp-8: 4rem; --sp-9: 6rem; --sp-10: 9rem;
  --gutter: 24px;
  --wrap: 1360px;
  --section-y: clamp(4.5rem, 2.9rem + 6.5vw, 9rem);
  --header-h: 64px;

  /* ---------- Shape ---------- */
  --r-ui: 4px;     /* buttons, fields */
  --r-card: 8px;   /* cards, media */
  --r-pill: 999px; /* chips only */

  /* ---------- Motion (spec §5: quiet, ≤ 0.6 s, power2.out, 24 px) ---------- */
  --ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);    /* = GSAP power1.out (easeOutQuad): UI state changes */
  --ease-reveal: cubic-bezier(0.215, 0.61, 0.355, 1);  /* = GSAP power2.out (easeOutCubic): reveals and crossfades */
  --dur-quick: 160ms;
  --dur-reveal: 600ms;
  --rise: 24px;
}

:root, [lang]:not(:lang(ar)) {
  /* ---------- Type (Latin; reset on any non-Arabic [lang] inside an Arabic page) ---------- */
  --font-display: "Bricolage Grotesque", "Reem Kufi", ui-sans-serif, system-ui, sans-serif;
  --font-text: "Instrument Sans", "IBM Plex Sans Arabic", ui-sans-serif, system-ui, sans-serif;
  /* Scale: fluid between 390 and 1440 px. Display ≈ 56 → 152 px. */
  --fs-display: clamp(3.5rem, 1.27rem + 9.14vw, 9.5rem);
  --fs-1: clamp(2.5rem, 1.5rem + 4.1vw, 5.25rem);
  --fs-2: clamp(1.875rem, 1.32rem + 2.29vw, 3.375rem);
  --fs-3: clamp(1.375rem, 1.19rem + 0.76vw, 1.875rem);
  --fs-body-l: clamp(1.125rem, 1.08rem + 0.19vw, 1.25rem);
  --fs-body: 1.0625rem;
  --fs-small: 0.875rem;
  --lh-display: 0.9;
  --lh-head: 0.98;
  --lh-text: 1.55;
  --wght-display: 620;
  --wght-head: 600;
  --track-display: -0.04em;
  --track-head: -0.025em;
  --track-sub: -0.012em;
}

@media (min-width: 900px) {
  :root { --gutter: 40px; --header-h: 76px; }
}

/* Arabic: Reem Kufi (geometric Kufi) and IBM Plex Sans Arabic; a touch larger (smaller x-height), more leading, no tracking. */
:lang(ar) {
  --font-display: "Reem Kufi", "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --font-text: "IBM Plex Sans Arabic", "Instrument Sans", ui-sans-serif, system-ui, sans-serif;
  --fs-display: clamp(3.5rem, 1.5rem + 8.2vw, 8.875rem);
  --fs-1: clamp(2.5rem, 1.6rem + 3.7vw, 5rem);
  --lh-display: 1.25;
  --lh-head: 1.35;
  --lh-text: 1.85;
  --wght-display: 650;
  --wght-head: 600;
  --track-display: 0;
  --track-head: 0;
  --track-sub: 0;
}