/* ==========================================================================
   TARAQI DEVELOPMENTS — Design Tokens
   Source of truth: /assets/brand/Taraqi_Brand_Guidelines.pdf
   Do not introduce colors or fonts that are not on this sheet.
   ========================================================================== */

:root {
  /* --- Color (brand sheet, page 03) --- */
  --taraqi-burgundy-dark: #5C2530;  /* primary — CTA / logo / headlines */
  --taraqi-burgundy:      #9B4753;  /* secondary accent + hover state    */
  --taraqi-cream:         #F6F1EA;  /* default page background           */
  --taraqi-sand:          #C9B49C;  /* quiet secondary surface           */
  --taraqi-ink:           #2B2320;  /* body text — never pure black      */
  --taraqi-wine:          #541D2B;  /* deep surface — sampled from the Company Profile PDF.
                                       Surfaces only (footer, mobile menu, full-bleed dark
                                       bands); never text, buttons or the nav bar. */

  /* Derived surfaces (opacity only — no new hues) */
  --taraqi-line:          rgba(43, 35, 32, 0.12);
  --taraqi-line-onDark:   rgba(246, 241, 234, 0.18);
  --taraqi-sand-veil:     rgba(201, 180, 156, 0.16);
  /* Paper grain from the Company Profile — laid over --taraqi-wine surfaces only */
  --taraqi-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0.33 0.33 0.33 0 -0.23  0.33 0.33 0.33 0 -0.23  0.33 0.33 0.33 0 -0.23  0 0 0 0 1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --taraqi-scrim:         rgba(92, 37, 48, 0.72);   /* deep burgundy, dimming a page behind a dialog — never black */

  /* --- Type --- */
  --font-en-heading: 'Newsreader', serif;   /* the one English serif — everything set in .display */
  --font-en-display: var(--font-en-heading); /* taglines, project names, nav menu — same face */
  --font-en-body:    'Work Sans', sans-serif;
  --font-ar-display: 'Aref Ruqaa', serif;
  --font-ar-body:    'IBM Plex Sans Arabic', sans-serif;

  /* English heading scale — three steps, applied by .display-xl / -l / -m
     below. The sizes are the only part pages may read directly. */
  --display-xl-size: clamp(2.25rem, 4vw, 3.5rem);     /* 36–56px: every page hero h1 */
  --display-l-size:  clamp(2rem, 4vw, 3.5rem);        /* 32–56px: section h2s, the closing tagline */
  --display-m-size:  clamp(1.5rem, 2.2vw, 1.875rem);  /* 24–30px: plan and drawing-board names, the register dialog title */

  /* --- Motion (read live by js/motion.js; the spec is
         design-system/taraqi-developments/MASTER.md §2) --- */
  --ease-rise:  cubic-bezier(0.22, 1, 0.36, 1);   /* = gsap power4.out — anything that arrives */
  --ease-draw:  cubic-bezier(0.45, 0, 0.55, 1);   /* = gsap power2.inOut — anything that is drawn */
  --ease-exit:  cubic-bezier(0.55, 0, 1, 0.45);   /* = gsap power2.in — dialogs leaving */
  --dur-micro:  240ms;   /* hovers, buttons — keep under 300ms */
  --dur-reveal: 700ms;   /* body fade + rise (moment #4); every other duration is a multiple of it */
  --dur-word:   840ms;   /* headline word rise            (reveal × 1.2) */
  --dur-rule:   920ms;   /* hairline rule draw            (moment #5) */
  --dur-frame:  980ms;   /* picture clip-path open        (reveal × 1.4) */
  --dur-settle: 1400ms;  /* picture scale 1.12 → 1        (reveal × 2)   */
  --dur-draw:   1680ms;  /* hairline rectangle / line draw (reveal × 2.4) */
  --stagger:      80ms;  /* the site's one interval: sections, hero lines, facts */
  --stagger-word: 60ms;  /* inside a headline, and copy inside a card */
  --stagger-card: 120ms; /* card to card across a row */
  --rise:       24px;    /* section copy */
  --rise-tight: 16px;    /* copy inside a card or a panel */
  --rise-micro: 12px;    /* labels, facts, CTAs */
  /* ScrollTrigger start bands — where the element's top is when it plays */
  --trigger-copy:     80%;   /* fade + rise sections */
  --trigger-headline: 75%;   /* word-split copy blocks and framed figures */
  --trigger-media:    85%;   /* cards and standalone rules — taller, so earlier */
  --trigger-draw:     70%;   /* drawings — they need the time */

  /* --- Layout --- */
  --shell-max:  1280px;
  --rail-w:     1px;     /* the Rise Rail */
}

/* Usage ratio target — Cream ~60% / Deep Burgundy ~15-20% / Burgundy accent / Sand surface */
html { background: var(--taraqi-cream); color: var(--taraqi-ink); }

/* --------------------------------------------------------------------------
   Language-aware typography. Driven by <html lang> — never by a class.
   -------------------------------------------------------------------------- */
html[lang="en"] body            { font-family: var(--font-en-body); }
html[lang="en"] .display {
  font-family: var(--font-en-heading);
  font-weight: 500;                        /* the only Newsreader weight loaded */
  font-variation-settings: "opsz" 72;
  letter-spacing: -0.01em;
}
/* Small figures, 22–28px. The travel times stay in the serif: lining,
   tabular numerals at the text optical size, so the digits hold their
   columns. The stage counter is set in Work Sans 600 — at 28px the serif's
   two digits and dash read too light beside the label above them. */
html[lang="en"] .nearby-time.display {
  font-variation-settings: normal;         /* opsz follows the font size */
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: normal;
}
html[lang="en"] .how-counter.display {
  font-family: var(--font-en-body);
  font-weight: 600;
  font-variation-settings: normal;
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: normal;
}
html[lang="ar"] body            { font-family: var(--font-ar-body); }
html[lang="ar"] .display        { font-family: var(--font-ar-display); font-weight: 700; }

/* Display faces break below ~20px — never let them inherit into small text */
.display { font-size: clamp(1.5rem, 4vw, 3.5rem); line-height: 1.1; }

/* The English heading system. Three steps, English only — Arabic headings
   keep the sizes and line-heights their own classes give Aref Ruqaa. A
   heading takes one of these classes instead of setting its own face, size,
   spacing or line-height; no title carries a text-shadow — over a picture the
   veil or scrim under the copy holds the contrast.
     xl — the home hero's "Homes that rise with you.": italic, the optical
          size following the font size. Every page hero h1.
     l  — section h2s: roman, with the accent word in an <em>.
     m  — plan and drawing-board names, the register dialog title. The
          home project cards and the unit-mix names keep sizes of their
          own (home.css, project.css). */
html[lang="en"] .display-xl,
html[lang="en"] .display-l,
html[lang="en"] .display-m {
  font-family: var(--font-en-display);
  font-weight: 500;
}
html[lang="en"] .display-xl {
  font-style: italic;
  font-variation-settings: normal;
  font-size: var(--display-xl-size);
  line-height: 1.2;
  letter-spacing: -0.02em;
}
html[lang="en"] .display-l {
  font-style: normal;
  font-variation-settings: "opsz" 72;
  font-size: var(--display-l-size);
  line-height: 1.1;
  letter-spacing: -0.01em;
}
html[lang="en"] .display-l em { font-style: italic; }
html[lang="en"] .display-m {
  font-style: normal;
  font-variation-settings: "opsz" 72;
  font-size: var(--display-m-size);
  line-height: 1.3;
  letter-spacing: -0.01em;
}

/* Prices, phone numbers, dates stay LTR inside RTL layout (brand sheet, page 07) */
.ltr-num { direction: ltr; unicode-bidi: isolate; display: inline-block; }

/* Latin-script runs inside an RTL container — stops the bidi algorithm from
   reordering trailing punctuation ("Homes that rise with you." → ".Homes …") */
.lat { direction: ltr; unicode-bidi: isolate; display: inline-block; }

/* --------------------------------------------------------------------------
   Accessibility floor
   -------------------------------------------------------------------------- */
:focus-visible {
  outline: 2px solid var(--taraqi-burgundy);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Prevent the flash of untranslated content before i18n.js hydrates.
   The whole body holds back — visibility only, so layout still runs and
   trigger measurements stay valid — and the first painted frame is the
   complete page. Painting the empty skeleton first and the dictionary a
   frame later shifted everything below each page head: that was the one
   real layout instability Lighthouse found (CLS up to 0.30). If the
   dictionary ever fails to load, i18n.js logs it loudly — a text-less
   skeleton was never a usable fallback. */
html:not([data-i18n-ready]) body { visibility: hidden; }
html:not([data-i18n-ready]) [data-i18n] { visibility: hidden; }