:root {
  color-scheme: dark;

  /* Surfaces */
  --void: #04060d;
  --night: #070b17;
  --night-2: #0a1020;
  --plate: rgba(255, 255, 255, 0.032);
  --plate-strong: rgba(255, 255, 255, 0.062);
  --glass: rgba(8, 13, 27, 0.72);
  --line: rgba(146, 172, 255, 0.13);
  --line-strong: rgba(146, 172, 255, 0.3);

  /* Ink */
  --fg: #f3f6fd;
  --fg-soft: #aab4cf;
  --fg-faint: #7f8aab;
  --on-accent: #03121a;

  /* Brand — names are read by the girih tag and the WebGL scene */
  --lapis: #22306b;
  --lapis-deep: #0a1020;
  --lapis-bright: #4b63d8;
  --firouzeh: #2fe0d0;
  --firouzeh-ink: #18bcae;
  --firouzeh-bright: #7ef3e7;
  --saffron: #f6b53f;
  --lac: #ff6f61;
  --success: #38d39f;

  /* Gradients */
  --grad-text: linear-gradient(105deg, #7ef3e7 0%, #93a6ff 48%, #f6c465 100%);
  --grad-primary: linear-gradient(135deg, #3ae4d3 0%, #4d7dff 100%);
  --grad-sheen: linear-gradient(
    120deg,
    rgba(126, 243, 231, 0.14),
    rgba(75, 99, 216, 0.1) 45%,
    rgba(246, 181, 63, 0.12)
  );

  /* Type */
  --font-text: "Vazirmatn", "Segoe UI", Tahoma, system-ui, sans-serif;
  --font-display: "Archivo", "Vazirmatn", "Segoe UI", system-ui, sans-serif;
  --font-fa-display: "Vazirmatn", "Segoe UI", Tahoma, sans-serif;
  --font-mono: "Cascadia Mono", "SFMono-Regular", Consolas, monospace;

  --text-xs: 0.8125rem;
  --text-sm: 0.9375rem;
  --text-base: 1.0625rem;
  --text-md: 1.1875rem;
  --text-lg: 1.375rem;
  --text-xl: clamp(1.45rem, 1.2rem + 1vw, 1.9rem);
  --text-2xl: clamp(1.75rem, 1.35rem + 1.9vw, 2.6rem);
  --text-3xl: clamp(2.1rem, 1.45rem + 3.1vw, 3.7rem);
  --text-4xl: clamp(2.5rem, 1.4rem + 4.6vw, 4.9rem);
  --text-5xl: clamp(2.9rem, 1rem + 7.2vw, 7rem);

  --leading-tight: 1.08;
  --leading-display: 1.16;
  --leading-body: 1.65;
  --leading-fa: 1.85;
  --tracking-display: -0.015em;
  --tracking-label: 0.08em;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;
  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --section-space: clamp(4.5rem, 9vw, 8rem);
  --shell: 78rem;
  --measure: 42rem;
  --margin-col: clamp(9rem, 15vw, 14rem);

  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 26px;
  --r-xl: 34px;
  --r-full: 999px;

  --shadow-card: 0 26px 70px -34px rgba(0, 0, 0, 0.85);
  --shadow-pop: 0 18px 48px -22px rgba(0, 0, 0, 0.75);
  --glow-firouzeh: 0 22px 70px -26px rgba(47, 224, 208, 0.5);
  --glow-lapis: 0 26px 90px -32px rgba(77, 125, 255, 0.55);

  --ring: 2px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 150ms;
  --dur: 300ms;
  --dur-slow: 650ms;

  --header-h: 4.5rem;
}

:lang(fa) {
  --leading-body: var(--leading-fa);
  --tracking-display: 0;
  --text-xl: clamp(1.35rem, 1.15rem + 0.9vw, 1.75rem);
  --text-2xl: clamp(1.6rem, 1.25rem + 1.7vw, 2.35rem);
  --text-3xl: clamp(1.9rem, 1.35rem + 2.8vw, 3.25rem);
  --text-4xl: clamp(2.2rem, 1.3rem + 4.1vw, 4.4rem);
  --text-5xl: clamp(2.5rem, 1rem + 6.6vw, 6.3rem);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 1ms;
    --dur: 1ms;
    --dur-slow: 1ms;
  }
}