/* ============================================================
   کفش ایوان — base.css v12
   توکن‌ها، ریست، تایپوگرافی، پایه‌های مشترک
   ============================================================ */

:root {
  /* طلایی */
  --g1: #fdf0bd; --g2: #e8c95a; --g3: #d4af37;
  --g4: #b8860b; --g5: #8f6a09; --g6: #6b4f06;

  /* متن */
  --ink: #2b2418; --ink-2: #4a4234; --ink-glass: #3a2c05;
  --muted: #6d6450; --muted-2: #8d846c;

  /* سطوح */
  --paper: #fdfcf7; --paper-2: #fffdf6; --white: #ffffff;

  /* معنایی */
  --danger: #b91c1c; --success: #166534; --success-bg: #dcfce7;

  /* شیشه */
  --glass-bg: rgba(255, 253, 246, 0.55);
  --glass-bg-item: rgba(255, 253, 246, 0.72);
  --glass-bg-featured: rgba(255, 253, 240, 0.92);
  --glass-blur: 22px;
  --glass-blur-sm: 14px;
  --glass-sat: 1.8;
  --glass-border-gold: rgba(212, 175, 55, 0.65);
  --glass-border-gold-strong: rgba(184, 134, 11, 0.85);
  --silver-highlight: rgba(255, 255, 255, 0.92);

  /* گرادیان */
  --gold-gradient: linear-gradient(100deg, #8b6914 0%, #a8790a 22%, #b8860b 42%, #c9900a 50%, #b8860b 58%, #a8790a 78%, #8b6914 100%);
  --gold-gradient-deep: linear-gradient(160deg, #d4af37 0%, #b8860b 40%, #8f6a09 100%);

  /* الگو */
  --pattern-diamond: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23b8860b' stroke-width='0.6'%3E%3Cpath d='M60 20 L69 51 L100 60 L69 69 L60 100 L51 69 L20 60 L51 51 Z'/%3E%3Ccircle cx='60' cy='60' r='6'/%3E%3Ccircle cx='60' cy='60' r='15' stroke-dasharray='2 4'/%3E%3C/g%3E%3C/svg%3E");
  --pattern-gold-line: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='10' viewBox='0 0 40 10'%3E%3Cline x1='0' y1='5' x2='40' y2='5' stroke='%23d4af37' stroke-width='0.7' stroke-opacity='0.55'/%3E%3Cpath d='M5 3 L6.5 5 L5 7 L3.5 5 Z' fill='%23d4af37'/%3E%3Ccircle cx='17' cy='5' r='0.5' fill='%23d4af37'/%3E%3Cpath d='M29 3 L30.5 5 L29 7 L27.5 5 Z' fill='%23d4af37'/%3E%3C/svg%3E");

  /* فاصله */
  --space-xs: 4px; --space-sm: 6px; --space-md: 10px;
  --space-lg: 14px; --space-xl: 20px;

  /* شعاع */
  --radius-xs: 6px; --radius-sm: 9px; --radius-md: 12px;
  --radius-lg: 16px; --radius-xl: 20px; --radius-2xl: 26px;
  --radius-pill: 999px;

  /* سایه */
  --shadow-sm: 0 2px 6px rgba(184, 134, 11, 0.10);
  --shadow-md: 0 4px 14px rgba(184, 134, 11, 0.14);
  --shadow-lg: 0 8px 24px rgba(184, 134, 11, 0.18);
  --shadow-xl: 0 14px 40px rgba(184, 134, 11, 0.22);

  /* گذار */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-back: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 0.15s; --dur-med: 0.25s; --dur-slow: 0.5s;

  /* فونت */
  --font-body: 'Vazirmatn', Tahoma, system-ui, sans-serif;
  --font-display: 'Gulzar', 'Vazirmatn', serif;
  --font-mono: ui-monospace, 'Cascadia Code', Menlo, monospace;

  /* چیدمان */
  --top-bar-h: 64px;
  --nav-h: 92px;
  --action-h: 0px;
  --toast-offset-bottom: calc(var(--nav-h) + var(--action-h) + 24px);

  /* z-index */
  --z-bg: 0; --z-base: 1; --z-card: 3; --z-nav: 10;
  --z-nav-fixed: 30; --z-sheet: 100; --z-toast: 200; --z-skip: 999;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

html {
  height: 100%;
  font-size: clamp(13px, 0.9vw + 8px, 17px);
  color-scheme: light;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
button, input, textarea, select { font: inherit; color: inherit; }
button { background: none; border: none; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }

body {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink);
  background-color: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  min-height: 100svh;
  position: relative;
  isolation: isolate;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: var(--z-bg);
  pointer-events: none;
  background-image: var(--pattern-diamond);
  background-size: 120px 120px;
  opacity: 0.04;
  -webkit-mask-image: radial-gradient(ellipse 90% 75% at 50% 50%, #000 25%, transparent 88%);
          mask-image: radial-gradient(ellipse 90% 75% at 50% 50%, #000 25%, transparent 88%);
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 900; line-height: 1.3; color: var(--ink);
}
h1 { font-size: clamp(1.3rem, 2.5vh, 1.75rem); }
h2 { font-size: clamp(1.05rem, 1.9vh, 1.35rem); }
h3 { font-size: clamp(0.92rem, 1.55vh, 1.1rem); }
p { line-height: 1.75; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.text-gold {
  background-image: var(--gold-gradient);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--g4);
}
.text-ltr {
  direction: ltr; unicode-bidi: embed; text-align: right;
  font-variant-numeric: tabular-nums;
}

:focus-visible {
  outline: 2px solid var(--g4);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}
button:focus:not(:focus-visible),
a:focus:not(:focus-visible) { outline: none; }

* { scrollbar-width: none; -ms-overflow-style: none; }
*::-webkit-scrollbar { display: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

.skip-link {
  position: absolute; top: -100px; right: 50%;
  transform: translateX(50%);
  background: var(--g5); color: #fff;
  padding: 10px 20px;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  text-decoration: none; font-weight: 700;
  z-index: var(--z-skip);
  transition: top var(--dur-med) var(--ease-out);
}
.skip-link:focus { top: 0; }

[hidden] { display: none !important; }