:root {

  --fs-display: clamp(44px, 5.5vw, 96px);
  --fs-h1: clamp(40px, 4.6vw, 76px);
  --fs-h2: clamp(30px, 3.2vw, 52px);
  --fs-h3: clamp(22px, 1.9vw, 30px);
  --fs-lead: clamp(17px, 1.45vw, 22px);
  --fs-body: 16px;
  --fs-small: 14px;
  --fs-micro: 12px;

  --lh-tight: 1.02;
  --lh-head: 1.12;
  --lh-body: 1.6;
  --ls-display: -.035em;
  --ls-head: -.025em;
  --ls-label: .2em;

  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semi: 600;

  --measure: 62ch;
  --measure-ar: 40ch;

  --sp-1: 4px;  --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px;  --sp-7: 48px;  --sp-8: 64px;
  --sp-9: 96px; --sp-10: 144px;
  --section-y: clamp(96px, 16vh, 200px);
  --max-w: 1440px;

  --r-sm: 4px;
  --r-md: 10px;
  --r-lg: 20px;
  --r-pill: 999px;

  --surface-1: var(--tint);
  --surface-2: var(--tint);
  --rim: var(--line);
  --rim-strong: var(--line-strong);

  --glass-bg: var(--glass-tint);
  --glass-blur: blur(18px) saturate(1.8);
  --glass-shadow: inset 0 1px 0 var(--glass-line), 0 18px 50px rgba(0, 0, 0, .18);

  --z-scene: 0;
  --z-shade: 1;
  --z-content: 2;
  --z-veil: 3;
  --z-header: 50;
  --z-menu: 60;
  --z-loader: 100;

  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-inout: cubic-bezier(.65, 0, .35, 1);
  --ease-ui: cubic-bezier(.4, 0, .2, 1);

  --dur-ui: .25s;
  --dur-reveal: 1s;
  --dur-scene: 2.4s;
  --stagger-word: .065;
}

html[lang="ar"] {
  --ls-display: 0; --ls-head: 0; --ls-label: 0;
  --lh-tight: 1.28; --lh-head: 1.35; --lh-body: 1.8;
  --measure: var(--measure-ar);
}