/* ============================================================
   True Self Practice, Design Tokens (real brand)
   Palette: Cypress green · Cream · Stone taupe · Ink
   Type: Jost (geometric, matches wordmark) + Source Sans 3
         Arabic: Tajawal (brand font, display + body)
   ============================================================ */

:root {
  /* ---- Brand palette ---- */
  --cream:      #F4F0E7;  /* page background */
  --cream-2:    #EBE6D9;  /* alt sections */
  --cream-3:    #E1DACA;  /* hairline fills */
  --cypress:    #2E3A33;  /* deep green, dark surfaces, primary */
  --cypress-2:  #3B4A40;  /* raised green / hover */
  --cypress-ink:#26302A;  /* body text (green-black) */
  --stone:      #96897A;  /* taupe accent / photo ground */
  --stone-deep: #7A6E60;  /* accent hover */
  --stone-tint: #DBD2C3;
  --ink:        #1C1C1A;  /* wordmark black */
  --white:      #FBFAF5;  /* warm surface */

  /* ---- Semantic tokens ---- */
  --bg:            var(--cream);
  --bg-alt:        var(--cream-2);
  --surface:       var(--white);
  --text:          var(--cypress-ink);
  --text-soft:     #3B463F;
  --text-muted:    #6E675B;
  --text-on-dark:  #E9E4D7;
  --accent:        var(--stone);
  --accent-deep:   var(--stone-deep);
  --dark:          var(--cypress);
  --border:        #DDD5C5;
  --ring:          var(--stone-deep);

  /* ---- Typography ---- */
  --font-display: "Jost", system-ui, -apple-system, Segoe UI, sans-serif;
  --font-body:    "Source Sans 3", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-ar-display: "Tajawal", "Jost", sans-serif;
  --font-ar-body:    "Tajawal", system-ui, sans-serif;

  /* Fluid type scale */
  --fs-xs:   clamp(0.75rem, 0.72rem + 0.15vw, 0.82rem);
  --fs-sm:   clamp(0.88rem, 0.84rem + 0.2vw, 0.96rem);
  --fs-base: clamp(1rem, 0.96rem + 0.25vw, 1.12rem);
  --fs-md:   clamp(1.12rem, 1.02rem + 0.5vw, 1.32rem);
  --fs-lg:   clamp(1.45rem, 1.2rem + 1.05vw, 1.95rem);
  --fs-xl:   clamp(1.9rem, 1.45rem + 2.1vw, 2.95rem);
  --fs-2xl:  clamp(2.4rem, 1.6rem + 3.4vw, 4.25rem);
  --fs-3xl:  clamp(3rem, 1.9rem + 4.8vw, 5.4rem);

  --lh-tight: 1.12;
  --lh-snug:  1.3;
  --lh-body:  1.68;

  --tracking-wide:  0.14em;
  --tracking-wider: 0.26em;

  /* ---- Spacing ---- */
  --sp-1: 0.5rem;  --sp-2: 1rem;   --sp-3: 1.5rem;  --sp-4: 2rem;
  --sp-5: 3rem;    --sp-6: 4.5rem; --sp-7: 6.5rem;  --sp-8: 9rem;

  --container: 1200px;
  --container-narrow: 760px;

  /* ---- Radii / shadow / motion ---- */
  --radius-sm: 4px;  --radius: 12px;  --radius-lg: 22px;  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(38,48,42,0.05), 0 4px 14px rgba(38,48,42,0.06);
  --shadow-md: 0 8px 30px rgba(38,48,42,0.10), 0 3px 10px rgba(38,48,42,0.06);
  --shadow-lg: 0 30px 70px rgba(38,48,42,0.15);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 180ms;  --dur: 340ms;  --dur-slow: 620ms;

  --nav-h: 84px;
}

/* Arabic / RTL type swap */
html[lang="ar"] {
  --font-display: var(--font-ar-display);
  --font-body:    var(--font-ar-body);
  --lh-tight: 1.28;
  --lh-body:  1.95;
  --tracking-wide: 0;
  --tracking-wider: 0;
}