/*
 * core/tokens.css — design tokens (single source of truth)
 * --------------------------------------------------------------------------
 * همه‌ی رنگ‌ها، radiusها، سایه‌ها و ... فقط اینجا مقدار خام دارند.
 * بقیه‌ی فایل‌ها فقط با var(--...) از این‌ها استفاده می‌کنند و مقدار hex/rgba
 * مستقیم نمی‌نویسند. این فایل باید قبل از همه‌ی stylesheetهای فرانت لود شود.
 *
 * نام‌گذاری:
 *   --color-*    رنگ‌ها (برند، متن، سطح، border، وضعیت)
 *   --radius-*   گردی گوشه‌ها
 *   --shadow-*   سایه‌ها
 *   --btn-*      توکن‌های دکمه
 *   --transition-*
 *
 * متغیر مخصوص یک کامپوننت/صفحه (مثل --mag-* یا --dgk-*) روی selector خود
 * همان بخش تعریف می‌شود، نه روی :root.
 */

:root {
  /* ---- Base ---- */
  --color-white: #fff;
  --color-black: #000;

  /* ---- Brand ---- */
  --color-primary: #023078;
  --color-primary-dark: #011c47;
  --color-primary-light: #2e5aa8;
  --color-primary-soft: color-mix(in srgb, var(--color-primary) 8%, transparent);

  --color-secondary: #6B7A8C;
  --color-secondary-dark: #475569;
  --color-secondary-soft: rgba(100, 116, 139, .14);

  --color-accent: #fca805;
  --color-accent-dark: #c39730;
  --color-accent-ink: #5a3b00;

  /* ---- Blue scale (فوتر، منو، باکس‌های مشاوره؛ روشن ← تیره) ---- */
  --color-blue-50: #eaf4fb;
  --color-blue-100: #eef0f5;
  --color-blue-200: #cddaf0;
  --color-blue-300: #87c1ec;
  --color-blue-400: #68b6f1;
  --color-blue-500: #6581ad;
  --color-blue-600: #455f87;
  --color-blue-700: #0f408d;
  --color-blue-800: #3f4064;
  --color-blue-850: #284258;
  --color-blue-900: #02255c;
  --color-slate-500: #7a8795;

  /* ---- Status ---- */
  --color-sale: #ef5661;
  --color-sale-dark: #c62828;
  --color-discount: #ff0100;

  --color-danger: #e53935;
  --color-danger-subtle: #fff5f5;
  --color-danger-soft: #fbe8e2;
  --color-danger-border: #e3a692;

  --color-warning: #fec302;
  --color-warning-strong: #dbac01;
  --color-warning-dark: #c39730;
  --color-warning-light: #ffe6b3;
  --color-warning-soft: #fbf0dc;

  --color-success: #1e5c3a;
  --color-success-hover: #164529;
  --color-success-active: #123a22;
  --color-success-text: #1f7a4d;
  --color-success-soft: #e3f1e6;
  --color-success-border: #8fbf9f;

  --color-info-soft: #e4f1f3;
  --color-info-text: #217084;

  /* ---- Social ---- */
  --color-social-whatsapp: #25d366;
  --color-social-telegram: #229ed9;
  --color-social-facebook: #1877f2;
  --color-social-twitter: #1da1f2;

  /* ---- Text ---- */
  --color-dark: #171717;
  --color-text: #0A2740;
  --color-text-soft: #003B73;
  --color-text-muted: #7A8A90;
  --color-text-muted-alt: #8a97a0;
  --color-text-subtle: #94A3B8;

  /* ---- Gray scale (روشن ← تیره) ---- */
  --color-gray-50: #fafafa;
  --color-gray-100: #f5f5f5;
  --color-gray-150: #f0f0f0;
  --color-gray-200: #eee;
  --color-gray-250: #e5e5e5;
  --color-gray-300: #ddd;
  --color-gray-400: #ccc;
  --color-gray-450: #bbb;
  --color-gray-500: #999;
  --color-gray-550: #8a8a8a;
  --color-gray-600: #777;
  --color-gray-650: #666;
  --color-gray-700: #555;
  --color-gray-750: #444;
  --color-gray-800: #333;
  --color-gray-900: #222;
  --color-gray-950: #111;

  /* ---- Surfaces ---- */
  --color-page-bg: #b6bbc2;
  --color-surface-soft: #F5F8FB;
  --color-surface-badge: #EAF4F6;
  --color-skeleton: #e9eef3;
  --color-skeleton-highlight: #f6f9fc;

  /* ---- Borders / icons ---- */
  --color-border: var(--color-gray-200);
  --color-line: #DDE6EE;
  --color-border-card: #d6d6d6e0;
  --color-border-tan: #e5e0d3;
  --color-icon-light: #c7d0d4;
  --color-icon-muted: #b7c2c7;

  /* ---- Radius ---- */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 18px;
  --radius-xl: 20px;
  --radius-pill: 999px;

  /* ---- Shadows ---- */
  --shadow-sm: 0 4px 14px rgba(18, 34, 43, .08);
  --shadow-md: 0 10px 30px color-mix(in srgb, var(--color-primary) 10%, transparent);
  --shadow-hover: 0 14px 34px color-mix(in srgb, var(--color-primary) 16%, transparent);
  --shadow-lg: 0 14px 32px color-mix(in srgb, var(--color-primary) 14%, transparent);

  /* ---- Buttons (core/buttons.css) — کپسولی، مثل صفحه‌ی اصلی ---- */
  --btn-radius: var(--radius-pill);
  --btn-font-weight: 700;
  --btn-font-size: .9rem;
  --btn-padding-x: 1.25rem;
  --btn-padding-y: .55rem;
  --btn-font-size-sm: .8rem;
  --btn-padding-x-sm: .9rem;
  --btn-padding-y-sm: .35rem;
  --btn-font-size-lg: 1rem;
  --btn-padding-x-lg: 1.75rem;
  --btn-padding-y-lg: .8rem;

  /* ---- Motion ---- */
  --transition-base: .25s ease;

  /* ---- Skeleton loader (js/navigate-skeleton.js) ---- */
  --skeleton-gap: 16px;
}

@media (max-width: 575px) {
  :root { --skeleton-gap: 10px; }
}