/* ===================================================================
   Atelier Shisheh — Design Tokens
   Every color, radius, shadow and spacing value used across the
   template is defined here as a CSS custom property so the whole
   product can be re-themed by editing this single file.
   =================================================================== */

:root {
  /* ---------- Typography ---------- */
  --font-base: "Vazirmatn", "Tahoma", sans-serif;
  --fs-display: clamp(2.6rem, 5vw + 1rem, 5.4rem);
  --fs-h1: clamp(2.2rem, 3.4vw + 1rem, 3.4rem);
  --fs-h2: clamp(1.7rem, 2.2vw + 1rem, 2.4rem);
  --fs-h3: clamp(1.25rem, 1.2vw + 1rem, 1.6rem);
  --fs-body: 1.05rem;
  --fs-small: 0.875rem;
  --lh-tight: 1.18;
  --lh-normal: 1.8;

  /* ---------- Spacing scale ---------- */
  --sp-1: 0.4rem;
  --sp-2: 0.8rem;
  --sp-3: 1.4rem;
  --sp-4: 2.2rem;
  --sp-5: 3.6rem;
  --sp-6: 5.6rem;
  --sp-7: 8.4rem;

  /* ---------- Radii ---------- */
  --r-sm: 0.6rem;
  --r-md: 1.4rem;
  --r-lg: 2.2rem;
  --r-pill: 999px;

  /* ---------- Motion ---------- */
  --ease-glass: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 0.22s;
  --dur-med: 0.5s;
  --dur-slow: 0.9s;

  /* ---------- Depth (CSS 3D) ---------- */
  --depth-scene: 1600px;
  --depth-1: 18px;
  --depth-2: 42px;
  --depth-3: 74px;

  /* ---------- Z-index ---------- */
  --z-nav: 60;
  --z-modal: 90;
  --z-loader: 100;

  color-scheme: light;

  /* ---------- Light theme palette ---------- */
  --c-bg: #f4efe6;
  --c-bg-soft: #ece3d3;
  --c-bg-deep: #e4d8c2;
  --c-ink: #221c14;
  --c-ink-soft: #5c5344;
  --c-ink-faint: #8d8371;
  --c-surface: rgba(255, 253, 248, 0.62);
  --c-surface-strong: rgba(255, 253, 248, 0.86);
  --c-border: rgba(34, 28, 20, 0.12);
  --c-border-strong: rgba(34, 28, 20, 0.22);
  --c-accent: #b5622a;
  --c-accent-ink: #fff7ee;
  --c-accent-soft: rgba(181, 98, 42, 0.14);
  --c-teal: #1f5f58;
  --c-teal-soft: rgba(31, 95, 88, 0.14);
  --c-gold: #a9862f;
  --c-shadow: 34, 28, 20;
  --grain-opacity: 0.05;

  --gradient-mesh:
    radial-gradient(48rem 34rem at 12% -8%, rgba(181, 98, 42, 0.22), transparent 60%),
    radial-gradient(40rem 30rem at 108% 10%, rgba(31, 95, 88, 0.18), transparent 55%),
    radial-gradient(60rem 46rem at 50% 120%, rgba(169, 134, 47, 0.16), transparent 60%);
}

[data-theme="dark"] {
  color-scheme: dark;
  --c-bg: #14110c;
  --c-bg-soft: #1c1811;
  --c-bg-deep: #241f16;
  --c-ink: #f3ecdf;
  --c-ink-soft: #c2b7a1;
  --c-ink-faint: #8b8069;
  --c-surface: rgba(30, 26, 19, 0.55);
  --c-surface-strong: rgba(30, 26, 19, 0.82);
  --c-border: rgba(243, 236, 223, 0.1);
  --c-border-strong: rgba(243, 236, 223, 0.2);
  --c-accent: #e08a4f;
  --c-accent-ink: #241505;
  --c-accent-soft: rgba(224, 138, 79, 0.18);
  --c-teal: #57bdb3;
  --c-teal-soft: rgba(87, 189, 179, 0.16);
  --c-gold: #d9b25c;
  --c-shadow: 0, 0, 0;
  --grain-opacity: 0.08;

  --gradient-mesh:
    radial-gradient(48rem 34rem at 12% -8%, rgba(224, 138, 79, 0.16), transparent 60%),
    radial-gradient(40rem 30rem at 108% 10%, rgba(87, 189, 179, 0.14), transparent 55%),
    radial-gradient(60rem 46rem at 50% 120%, rgba(217, 178, 92, 0.1), transparent 60%);
}