/* Zanjireh design tokens — the only place colours, type and motion values live.
   Two themes: "Abyss" (dark, default) and "Pearl" (light). Product accents: --pa / --pb set per section. */
@font-face {
  font-family: "Vazirmatn";
  src: url("../vendor/fonts/Vazirmatn-var.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  /* brand constants */
  --z-emerald: #14E0A1;
  --z-cyan: #2AD6D9;
  --z-ice: #7CE8FF;
  --z-amber: #FFC27A;
  --z-rose: #FF7A8A;
  --z-grad: linear-gradient(120deg, var(--z-emerald) 0%, var(--z-cyan) 55%, var(--z-ice) 100%);
  --z-grad-soft: linear-gradient(120deg, rgba(20, 224, 161, .16), rgba(42, 214, 217, .10) 55%, rgba(124, 232, 255, .14));

  /* product accents */
  --p-club: #14E0A1;
  --p-vakil: #8FB4FF;
  --p-desk: #B49BFF;
  --p-bot: #2AD6D9;
  --p-sarresid: #FFC27A;
  --p-daftar: #7CE8FF;
  --p-sofre: #FF9AA8;

  /* type */
  --font: "Vazirmatn", "Segoe UI", Tahoma, sans-serif;
  --fs-0: .8125rem;
  --fs-1: .9375rem;
  --fs-2: 1.0625rem;
  --fs-3: clamp(1.25rem, 1.05rem + .8vw, 1.6rem);
  --fs-4: clamp(1.75rem, 1.2rem + 2.2vw, 3rem);
  --fs-5: clamp(2.35rem, 1.3rem + 4.2vw, 5.2rem);
  --lh: 1.85;
  --track-tight: -.015em;

  /* space & shape */
  --gutter: clamp(16px, 4vw, 40px);
  --max: 1240px;
  --r-1: 10px;
  --r-2: 16px;
  --r-3: 24px;
  --r-4: 34px;

  /* motion */
  --ease: cubic-bezier(.22, .9, .24, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --t-1: .18s;
  --t-2: .45s;
  --t-3: .9s;
}

/* ---------- Abyss (dark) ---------- */
:root, :root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #04070A;
  --bg-2: #070C10;
  --bg-3: #0B1217;
  --ink: 236, 245, 243;          /* rgb of the text colour, for tints */
  --text: rgb(var(--ink));
  --text-2: #A7BAB8;
  --text-3: #6E8483;
  --tint-1: rgba(var(--ink), .025);
  --tint-2: rgba(var(--ink), .045);
  --tint-3: rgba(var(--ink), .075);
  --border: rgba(180, 240, 236, .09);
  --border-2: rgba(180, 240, 236, .16);
  --glass: rgba(14, 22, 27, .62);
  --glass-hi: rgba(255, 255, 255, .06);
  --shadow-1: 0 30px 80px -30px rgba(0, 0, 0, .85);
  --shadow-2: 0 50px 120px -40px rgba(0, 0, 0, .95);
  --accent: var(--z-cyan);
  --accent-2: var(--z-emerald);
  --on-accent: #02110F;
  --grain: .05;
  --aurora: .55;
}

/* ---------- Pearl (light) ---------- */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #F4F7F6;
  --bg-2: #ECF2F1;
  --bg-3: #FFFFFF;
  --ink: 10, 21, 23;
  --text: rgb(var(--ink));
  --text-2: #3E5456;
  --text-3: #6A7F80;
  --tint-1: rgba(var(--ink), .02);
  --tint-2: rgba(var(--ink), .035);
  --tint-3: rgba(var(--ink), .06);
  --border: rgba(10, 40, 44, .10);
  --border-2: rgba(10, 40, 44, .17);
  --glass: rgba(255, 255, 255, .72);
  --glass-hi: rgba(255, 255, 255, .9);
  --shadow-1: 0 30px 70px -34px rgba(16, 60, 64, .32);
  --shadow-2: 0 50px 110px -44px rgba(16, 60, 64, .4);
  --accent: #0B8C9B;
  --accent-2: #0B8F6E;
  --on-accent: #02110F;
  --grain: .03;
  --aurora: .35;
}

@media (prefers-reduced-motion: reduce) {
  :root { --t-1: 0s; --t-2: 0s; --t-3: 0s; }
}