/* ============================================================
   دیدبان هوشمند بازار | Didban Smart Market
   پایه طراحی و سیستم جامع توکن‌های معنایی (Design Foundation & Tokenization v1.0)
   فاز ۲: استانداردسازی توکن‌های بصری، تایپوگرافی، فاصله‌گذاری، موشن و دسترسی‌پذیری
   ============================================================ */

:root {
  /* ==========================================================
     ۱. سیستم فاصله‌گذاری هندسی (Coherent Spacing Scale: 4 to 80px)
     مقیاس فاصله‌گذاری استاندارد تحریریه مالی
     ========================================================== */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 80px;

  /* نام‌های معنایی فاصله‌گذاری (Semantic Spacing Aliases) */
  --space-inline-xs: var(--space-1);
  --space-inline-sm: var(--space-2);
  --space-inline-md: var(--space-3);
  --space-inline-lg: var(--space-4);
  --space-inline-xl: var(--space-5);

  --space-stack-xs: var(--space-1);
  --space-stack-sm: var(--space-2);
  --space-stack-md: var(--space-4);
  --space-stack-lg: var(--space-5);
  --space-stack-xl: var(--space-6);
  --space-stack-2xl: var(--space-7);

  --space-card-padding: var(--space-4);
  --space-card-padding-compact: var(--space-3);
  --space-card-padding-spacious: var(--space-5);
  --space-section-gap: var(--space-7);
  --space-grid-gap: var(--space-4);
  --space-grid-gap-sm: var(--space-3);

  /* ==========================================================
     ۲. سیستم تایپوگرافی و مقیاس معنایی متن (Typography Foundation)
     بر اساس ممیزی جامع فونت استاندارد وزیرمتن (Vazirmatn) و اعداد جدولی
     ========================================================== */
  --font-family-sans: 'Vazirmatn', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Tahoma, sans-serif;
  --font-family-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace;
  --font-family-numeric: 'Vazirmatn', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* وزن‌های فونت کنترل‌شده (جلوگیری از وزن‌های سنگین ۸۰۰ و ۹۰۰ در متون عمومی) */
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* ارتفاع سطر بهینه برای زبان فارسی و حروف ترکیبی */
  --line-height-tight: 1.25;
  --line-height-snug: 1.375;
  --line-height-normal: 1.55;
  --line-height-relaxed: 1.68;
  --line-height-loose: 1.85;

  /* مقیاس ابعادی روان و واکنش‌گرا (Fluid Clamp Typography) */
  --font-size-display: clamp(1.85rem, 4.5vw, 2.75rem);
  --font-size-heading-xl: clamp(1.4rem, 3.2vw, 2rem);
  --font-size-heading-lg: clamp(1.2rem, 2.4vw, 1.5rem);
  --font-size-heading-md: clamp(1.05rem, 1.8vw, 1.25rem);
  --font-size-heading-sm: 1rem;
  --font-size-body-lg: clamp(0.975rem, 1.4vw, 1.125rem);
  --font-size-body-md: 0.9375rem; /* 15px */
  --font-size-body-sm: 0.8125rem; /* 13px */
  --font-size-caption: 0.75rem;   /* 12px */
  --font-size-metadata: 0.6875rem; /* 11px */

  /* ==========================================================
     ۳. سیستم شعاع گوشه‌ها (Radius System)
     طراحی مهارشده بدون انحناهای غیرمعمول و نامتقارن
     ========================================================== */
  --radius-none: 0px;
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;
  --radius-pill: 9999px;

  /* ==========================================================
     ۴. سیستم خطوط مرزی و بردرها (Border System)
     کاهش نویز بصری، استفاده پیش‌فرض از خطوط مویی ۱ پیکسلی با کنتراست ملایم
     ========================================================== */
  --border-width-hairline: 1px;
  --border-width-standard: 1px;
  --border-width-thick: 2px;

  /* ==========================================================
     ۵. سیستم سایه‌های مهارشده (Restrained Shadow Hierarchy)
     اجتناب از سایه‌های سیاه و کدر؛ استفاده از عمق ظریف، شفافیت پایین و فاصله بصری کوتاه
     ========================================================== */
  --shadow-none: none;
  --shadow-elevation-1: 0 1px 3px 0 rgba(0, 0, 0, 0.08), 0 1px 2px -1px rgba(0, 0, 0, 0.08);
  --shadow-elevation-2: 0 4px 6px -1px rgba(0, 0, 0, 0.10), 0 2px 4px -2px rgba(0, 0, 0, 0.08);
  --shadow-elevation-3: 0 10px 15px -3px rgba(0, 0, 0, 0.14), 0 4px 6px -4px rgba(0, 0, 0, 0.10);
  --shadow-elevation-4: 0 20px 25px -5px rgba(0, 0, 0, 0.20), 0 8px 10px -6px rgba(0, 0, 0, 0.15);
  --shadow-glow-subtle: 0 0 16px -2px var(--color-accent-glow, rgba(13, 148, 136, 0.20));

  /* ==========================================================
     ۶. سیستم زمان‌بندی و انیمیشن‌های نرم (Motion Foundation)
     انتقال‌های ظریف و حساب‌شده با احترام به ترجیح کاهش حرکت کاربر
     ========================================================== */
  --duration-instant: 50ms;
  --duration-fast: 160ms;     /* بازه استاندارد ۱۶۰ تا ۱۸۰ میلی‌ثانیه */
  --duration-standard: 240ms; /* بازه استاندارد ۲۲۰ تا ۲۸۰ میلی‌ثانیه */
  --duration-slow: 450ms;     /* بازه استاندارد ۴۰۰ تا ۶۰۰ میلی‌ثانیه */

  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.15);

  --transition-fast: all var(--duration-fast) var(--ease-out);
  --transition-standard: all var(--duration-standard) var(--ease-standard);
  --transition-slow: all var(--duration-slow) var(--ease-standard);
  --transition-colors: color var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
  --transition-transform: transform var(--duration-standard) var(--ease-standard);

  /* ==========================================================
     ۷. سیستم لایه‌بندی عمودی (Z-Index Hierarchy Scale)
     جلوگیری از تداخل z-index های تصادفی در سطح المان‌ها
     ========================================================== */
  --z-deep: -1;
  --z-base: 1;
  --z-raised: 10;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 300;
  --z-drawer-backdrop: 400;
  --z-drawer: 500;
  --z-modal-backdrop: 900;
  --z-modal: 1000;
  --z-toast: 1100;
  --z-tooltip: 1200;

  /* ==========================================================
     ۸. مقادیر ثوابت واکنش‌گرایی و عرض‌های شکست (Breakpoint Constants)
     عرض‌های هدف آزمون: 320, 360, 375, 390, 414, 430, 768, 1024, 1280, 1440+
     ========================================================== */
  --breakpoint-mobile-xs: 320px;
  --breakpoint-mobile-sm: 360px;
  --breakpoint-mobile-md: 390px;
  --breakpoint-mobile-lg: 430px;
  --breakpoint-tablet: 768px;
  --breakpoint-desktop-sm: 1024px;
  --breakpoint-desktop-md: 1280px;
  --breakpoint-desktop-lg: 1440px;

  /* ==========================================================
     ۹. سیستم رنگ‌های معنایی (Global Semantic Color Foundation)
     پل ارتباطی میان تم‌های فعال Theme Studio و توکن‌های استاندارد
     ========================================================== */
  --bg-surface-1: var(--bg-card);
  --bg-surface-2: var(--bg-input);
  --bg-surface-3: var(--bg-card-hover);
  --border-subtle: var(--border-color);

  --color-bg-primary: var(--bg-primary);
  --color-bg-secondary: var(--bg-secondary);
  --color-bg-tertiary: var(--bg-input);
  --color-surface: var(--bg-card);
  --color-surface-hover: var(--bg-card-hover);
  --color-surface-subtle: var(--bg-input);

  --color-text-primary: var(--text-primary);
  --color-text-secondary: var(--text-secondary);
  --color-text-muted: var(--text-muted);
  --color-text-inverse: var(--bg-primary);

  --color-accent-primary: var(--accent-primary, #0d9488);
  --color-accent-glow: var(--accent-glow, rgba(13, 148, 136, 0.25));
  --color-accent-gold: var(--accent-gold, #f59e0b);
  --color-accent-blue: var(--accent-blue, #3b82f6);

  --color-border-hairline: var(--border-color, rgba(255, 255, 255, 0.08));
  --color-border-subtle: var(--border-color, rgba(255, 255, 255, 0.08));
  --color-border-standard: var(--border-color, rgba(255, 255, 255, 0.12));
  --color-border-emphasis: var(--border-active, #0d9488);
  --color-border-focus: var(--accent-primary, #0d9488);

  /* رنگ‌های محاسباتی و جهت بازار (Financial Directional) */
  --color-market-up: var(--color-up, #ef4444);
  --color-market-down: var(--color-down, #10b981);
  --color-market-up-bg: var(--color-up-bg, rgba(239, 68, 68, 0.12));
  --color-market-down-bg: var(--color-down-bg, rgba(16, 185, 129, 0.12));
  --color-market-neutral: #64748b;
  --color-market-neutral-bg: rgba(100, 116, 139, 0.12);

  /* رنگ‌های بازخورد وضعیت سیستم (System Feedback) */
  --color-status-success: #10b981;
  --color-status-warning: #f59e0b;
  --color-status-danger: #ef4444;
  --color-status-info: #3b82f6;

  /* ==========================================================
     ۱۰. جداسازی پالت تحریریه صفحه اصلی (Homepage Isolated Tokens)
     این مقادیر فقط به سکشن‌های صفحه اصلی اختصاص دارد و روی داشبورد اعمال نمی‌شود
     ========================================================== */
  --didban-bg-light: #F7F7F5;
  --didban-surface: #FFFFFF;
  --didban-surface-hover: #FBFBFA;
  --didban-text-primary: #151515;
  --didban-text-secondary: #6B6B6B;
  --didban-text-muted: #949490;
  --didban-border: #E7E7E3;
  --didban-border-subtle: #F0F0EC;
  --didban-border-hairline: rgba(0, 0, 0, 0.06);
  --didban-gold: #C6A15B;
  --didban-gold-dark: #A9833D;
  --didban-gold-glow: rgba(198, 161, 91, 0.12);
}

/* ==========================================================
   دسترسی‌پذیری: حذف انیمیشن‌ها در صورت فعال بودن prefers-reduced-motion
   ========================================================== */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-instant: 0.01ms !important;
    --duration-fast: 0.01ms !important;
    --duration-standard: 0.01ms !important;
    --duration-slow: 0.01ms !important;
    --transition-fast: none !important;
    --transition-standard: none !important;
    --transition-slow: none !important;
    --transition-colors: none !important;
    --transition-transform: none !important;
  }

  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================
   کلاس‌های کمکی پایه تایپوگرافی، اعداد جدولی و مرزها (Foundation Utility Classes)
   جهت بهره‌برداری تدریجی در فازهای بعدی بدون تغییر در استایل‌های جاری
   ========================================================== */
.font-numeric-primary,
.didban-tabular-nums {
  font-family: var(--font-family-numeric);
  font-variant-numeric: tabular-nums;
  -webkit-font-feature-settings: "tnum" 1;
  font-feature-settings: "tnum" 1;
}

.didban-hairline-border {
  border: var(--border-width-hairline) solid var(--color-border-hairline);
}

.didban-subtle-border {
  border: var(--border-width-standard) solid var(--color-border-subtle);
}