/* ===================================================================
   VARIABLES.CSS — Design Tokens
   قالب پرتفولیوی شخصی لوکس و آینده‌نگر فارسی
=================================================================== */

:root{
  /* ---- رنگ‌های پایه (Base Palette) ---- */
  --bg: #08090D;
  --bg-soft: #0C0E15;
  --bg-elevated: #11131C;
  --card: rgba(255,255,255,0.08);
  --card-strong: rgba(255,255,255,0.12);
  --card-border: rgba(255,255,255,0.10);
  --primary: #7C3AED;
  --primary-soft: #9D5CF5;
  --primary-dim: rgba(124,58,237,0.18);
  --accent: #06B6D4;
  --accent-soft: #38D9F0;
  --accent-dim: rgba(6,182,212,0.18);
  --text: #FFFFFF;
  --text-soft: #94A3B8;
  --text-faint: #5B6477;
  --gold: #E8C97A; /* لمس طلایی برای جزئیات لوکس */

  /* ---- گرادیان‌های امضادار ---- */
  --grad-primary: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
  --grad-primary-soft: linear-gradient(135deg, rgba(124,58,237,0.35) 0%, rgba(6,182,212,0.35) 100%);
  --grad-radial-glow: radial-gradient(circle at 50% 0%, rgba(124,58,237,0.25), transparent 60%);
  --grad-text: linear-gradient(95deg, #ffffff 0%, #cdb8fb 45%, var(--accent-soft) 100%);

  /* ---- سایه‌ها و عمق (Shadows & Depth) ---- */
  --shadow-sm: 0 2px 10px rgba(0,0,0,0.35);
  --shadow-md: 0 12px 32px rgba(0,0,0,0.45);
  --shadow-lg: 0 30px 70px rgba(0,0,0,0.55);
  --shadow-glow-primary: 0 0 60px rgba(124,58,237,0.35);
  --shadow-glow-accent: 0 0 60px rgba(6,182,212,0.30);
  --shadow-inset-glass: inset 0 1px 0 rgba(255,255,255,0.12), inset 0 0 40px rgba(255,255,255,0.02);

  /* ---- تایپوگرافی ---- */
  --font-main: 'Vazirmatn', 'Tahoma', sans-serif;

  /* ---- شعاع گردی ---- */
  --r-sm: 10px;
  --r-md: 18px;
  --r-lg: 28px;
  --r-xl: 40px;
  --r-pill: 999px;

  /* ---- زمان‌بندی انیمیشن ---- */
  --ease-luxury: cubic-bezier(.16,1,.3,1);
  --ease-soft: cubic-bezier(.22,1,.36,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
  --dur-fast: .25s;
  --dur-mid: .55s;
  --dur-slow: 1s;

  /* ---- عرض محتوا ---- */
  --container: 1240px;
  --header-h: 96px;
}

::selection{
  background: var(--primary);
  color: #fff;
}