/* توکن‌های طراحی دنتیوال — تنها منبع رنگ، تایپوگرافی، فاصله، شعاع و سایه؛ رنگ پررنگ فقط برای CTA و تأکید، سطوح بزرگ خنثی، شعاع میانه، سایهٔ ملایم (مبنا: design.md و website.md §۳۴) */

:root {
  /* ویجت‌های خود مرورگر (input، select، اسکرول‌بار) باید هم‌حالت با صفحه بمانند */
  color-scheme: light;

  /* ---------- رنگ برند: سبز-زمردی عمیق؛ متمایز از آبی پزشکی کلیشه‌ای ---------- */
  --c-brand-50: #f2f8f6;
  --c-brand-100: #ddece8;
  --c-brand-200: #bbd8d1;
  --c-brand-300: #8fbdb2;
  --c-brand-400: #5c998b;
  --c-brand-500: #3b7a6c;
  --c-brand-600: #2a6055;
  --c-brand-700: #204c44;
  --c-brand-800: #1a3d37;
  --c-brand-900: #142f2b;

  /* ---------- رنگ تأکیدی گرم: فقط برای نشان «به‌صرفه‌تر» و تأکید کوچک ---------- */
  --c-accent-50: #fdf5ee;
  --c-accent-100: #f8e6d5;
  --c-accent-200: #efc9a5;
  --c-accent-400: #cf8a4a;
  --c-accent-500: #b4682e;
  --c-accent-600: #94531f;
  /* ته‌رنگ عمیق — سطح نشان تأکیدی در دارک‌مود؛ در حالت روشن استفاده نمی‌شود */
  --c-accent-800: #472d17;

  /* ---------- خنثی‌ها: اسلیت با ته‌رنگ سرد ملایم ---------- */
  --c-n-0: #ffffff;
  --c-n-25: #fbfcfc;
  --c-n-50: #f6f8f8;
  --c-n-100: #eef2f1;
  --c-n-200: #e2e8e7;
  --c-n-300: #c9d2d1;
  --c-n-400: #97a5a3;
  --c-n-500: #6b7a78;
  --c-n-600: #4d5b59;
  --c-n-700: #384442;
  --c-n-800: #232e2c;
  --c-n-900: #121b1a;
  /* دو پلهٔ عمیق‌تر که مقیاس روشن به آن‌ها نیاز نداشت — زمین و سطح کارت در دارک */
  --c-n-850: #1c2725;
  --c-n-950: #090f0e;
  /* مشکی خالص، فقط برای چاپ تک‌رنگ؛ در رابط کاربری استفاده نمی‌شود */
  --c-n-1000: #000000;

  /* ---------- رنگ‌های وضعیت ---------- */
  /* پلهٔ ۹۰۰ هر وضعیت فقط سطحِ دارک است؛ متنش از پلهٔ ۲۰۰ همان رنگ می‌آید */
  --c-success-50: #eef8f2;
  --c-success-200: #bfe3ce;
  --c-success-600: #1f7a4d;
  --c-success-700: #17603c;
  --c-success-900: #133524;
  --c-warn-50: #fdf6e7;
  --c-warn-200: #f2ddab;
  --c-warn-600: #8a6212;
  --c-warn-900: #3a2b0b;
  --c-danger-50: #fdf1f1;
  --c-danger-200: #f3c9c9;
  --c-danger-600: #a72f2f;
  --c-danger-700: #862626;
  --c-danger-900: #3f1919;
  --c-info-50: #eff5fa;
  --c-info-200: #c8dcec;
  --c-info-600: #2a5f8a;
  --c-info-900: #143049;

  /* ---------- نقش‌های معنایی ---------- */
  --color-brand: var(--c-brand-600);
  --color-brand-hover: var(--c-brand-700);
  --color-brand-active: var(--c-brand-800);
  --color-brand-ink: var(--c-brand-800);
  --color-brand-subtle: var(--c-brand-50);
  --color-brand-border: var(--c-brand-200);

  --color-accent: var(--c-accent-500);
  /* متنِ تأکیدی از accent-600 می‌آید؛ accent-500 روی سفید ۴٫۲۳ و زیر AA بود */
  --color-accent-ink: var(--c-accent-600);
  --color-accent-subtle: var(--c-accent-50);
  --color-accent-border: var(--c-accent-200);

  --color-page: var(--c-n-50);
  --color-surface: var(--c-n-0);
  --color-surface-raised: var(--c-n-0);
  --color-surface-sunken: var(--c-n-100);
  --color-surface-inverse: var(--c-brand-900);

  --color-text: var(--c-n-800);
  --color-text-strong: var(--c-n-900);
  /* کم‌رنگ = n-600؛ n-500 روی سطح روشن ۴٫۴۹ بود و حد AA (۴٫۵) را رد می‌کرد */
  --color-text-muted: var(--c-n-600);
  --color-text-inverse: var(--c-n-0);
  --color-text-on-brand: var(--c-n-0);
  /* فقط برای آیکن و نشانهٔ تزئینی (حد ۳:۱)؛ روی متن معمولی استفاده نشود */
  --color-icon-subtle: var(--c-n-500);

  --color-border: var(--c-n-200);
  --color-border-strong: var(--c-n-300);
  --color-border-subtle: var(--c-n-100);
  /* لبهٔ کنترل‌های تعاملی — جدا از border-strong چون WCAG 1.4.11 مرز اجزای رابط را ۳:۱ می‌خواهد؛ لبه‌های تزئینی همان border-strong می‌مانند */
  --color-control-border: var(--c-n-500);

  --color-focus: var(--c-brand-500);
  --focus-ring: 0 0 0 3px rgba(59, 122, 108, 0.32);
  --focus-ring-offset: 2px;

  /* ---------- نقش‌های معنایی وضعیت: متن، سطح و مرز ---------- */
  /* هر جفت متن/زمینه بالای ۴٫۵ است و رنگ هرگز تنها حامل معنا نیست */
  --color-success: var(--c-success-600);
  --color-success-ink: var(--c-success-700);
  --color-success-surface: var(--c-success-50);
  --color-success-border: var(--c-success-200);

  --color-warn: var(--c-warn-600);
  --color-warn-ink: var(--c-warn-600);
  --color-warn-surface: var(--c-warn-50);
  --color-warn-border: var(--c-warn-200);

  --color-danger: var(--c-danger-600);
  --color-danger-ink: var(--c-danger-700);
  --color-danger-surface: var(--c-danger-50);
  --color-danger-border: var(--c-danger-200);

  --color-info: var(--c-info-600);
  --color-info-ink: var(--c-info-600);
  --color-info-surface: var(--c-info-50);
  --color-info-border: var(--c-info-200);

  /* ستارهٔ امتیاز و نشان‌های کوچک — accent-600 تا روی سطح روشن خوانا بماند */
  --color-rating: var(--c-accent-600);

  /* ---------- روی سطح تیره: مرز و سطح نیم‌شفاف، تا رنگ خام در کامپوننت نماند ---------- */
  --color-inverse-hairline: rgba(255, 255, 255, 0.12);
  --color-inverse-surface: rgba(255, 255, 255, 0.08);
  --color-inverse-border: rgba(255, 255, 255, 0.35);
  --color-inverse-border-strong: rgba(255, 255, 255, 0.55);
  --color-inverse-border-solid: rgba(255, 255, 255, 0.7);
  /* پوشش تیره برای نوشتهٔ روی تصویر — کنتراست متن سفید بالای ۷ می‌ماند */
  --color-overlay-strong: rgba(18, 27, 26, 0.78);
  --color-overlay-media: rgba(18, 27, 26, 0.72);

  /* فوتر و نوار CTA در هر دو حالت تیره‌اند، پس این نقش‌ها در دارک تقریباً ثابت می‌مانند */
  --color-inverse-text-muted: var(--c-brand-200);
  --color-inverse-link: var(--c-brand-100);
  /* نشان برند تزئینی است و حد ۳:۱ برایش کافی است — ۶٫۸۶ روی سطح تیره */
  --color-inverse-brand-mark: var(--c-brand-300);
  /* دکمهٔ اصلی روی زمین تیره: تراشهٔ روشن با متن برند — ۱۱٫۸۹ */
  --color-inverse-cta: var(--c-n-0);
  --color-inverse-cta-hover: var(--c-brand-50);
  --color-inverse-cta-ink: var(--c-brand-800);

  /* ---------- اسکلت بارگذاری ---------- */
  --color-skeleton: var(--c-n-100);
  --color-skeleton-highlight: var(--c-n-200);
  --dur-skeleton: 1400ms;

  /* ---------- تایپوگرافی ---------- */
  --font-sans: 'Vazirmatn', 'Segoe UI', Tahoma, system-ui, sans-serif;
  --font-num: 'Vazirmatn', system-ui, sans-serif;

  --fs-2xs: 0.75rem;
  --fs-xs: 0.8125rem;
  --fs-sm: 0.875rem;
  --fs-md: 0.9375rem;
  --fs-base: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.25rem;
  --fs-2xl: 1.5rem;
  --fs-3xl: 1.875rem;
  --fs-4xl: 2.25rem;

  /* تیترهای سیّال — مقیاس‌پذیر بدون شکستن خوانایی فارسی */
  --fs-display: clamp(1.85rem, 1.35rem + 2.1vw, 3rem);
  --fs-h1: clamp(1.65rem, 1.25rem + 1.7vw, 2.5rem);
  --fs-h2: clamp(1.35rem, 1.12rem + 1vw, 1.875rem);
  --fs-h3: clamp(1.1rem, 1rem + 0.4vw, 1.3rem);

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 700;

  --lh-tight: 1.35;
  --lh-heading: 1.5;
  --lh-body: 1.8;
  --lh-relaxed: 1.95;

  --ls-tight: -0.01em;
  --ls-normal: 0;

  /* ---------- فاصله‌گذاری: مقیاس ۴ پیکسلی ---------- */
  --sp-0: 0;
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.25rem;
  --sp-6: 1.5rem;
  --sp-7: 1.75rem;
  --sp-8: 2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;
  --sp-24: 6rem;

  /* فاصلهٔ عمودی بخش‌ها — واکنشی */
  --section-y: clamp(2.75rem, 2rem + 3vw, 4.5rem);
  --section-y-lg: clamp(3.5rem, 2.5rem + 4vw, 6rem);

  /* ---------- شعاع: میانه و یکنواخت ---------- */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  /* فقط برای نشان‌ها و تراشه‌های کوچک؛ روی دکمه و کارت استفاده نشود */
  --radius-pill: 999px;

  /* ---------- سایه: بسیار ملایم ---------- */
  --shadow-xs: 0 1px 2px rgba(18, 27, 26, 0.04);
  --shadow-sm: 0 1px 3px rgba(18, 27, 26, 0.06), 0 1px 2px rgba(18, 27, 26, 0.04);
  --shadow-md: 0 4px 12px rgba(18, 27, 26, 0.06);
  --shadow-lg: 0 10px 28px rgba(18, 27, 26, 0.08);
  /* سایهٔ بزرگ فقط برای قاب عکسِ قهرمان؛ در بقیهٔ اجزا استفاده نمی‌شود */
  --shadow-xl: 0 18px 48px rgba(18, 27, 26, 0.10);
  --shadow-none: none;

  /* ---------- حرکت: کوتاه و فقط در پاسخ به تعامل ---------- */
  --dur-fast: 120ms;
  --dur-base: 180ms;
  --dur-slow: 260ms;
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  /* ---------- چیدمان ---------- */
  --container: 1160px;
  --container-narrow: 820px;
  --container-wide: 1320px;
  --gutter: clamp(1rem, 0.6rem + 1.6vw, 2rem);
  --header-h: 4.25rem;

  /* ---------- لایه‌بندی ---------- */
  --z-base: 1;
  --z-sticky: 100;
  --z-header: 200;
  --z-dropdown: 300;
  --z-overlay: 400;
  --z-modal: 500;
  --z-toast: 600;

  /* پل سازگاری: نام‌های قدیمی به توکن‌های جدید نگاشت می‌شوند تا صفحات موجود نشکنند */
  --brand: var(--color-brand);
  --brand-dark: var(--c-brand-800);
  --brand-light: var(--c-brand-100);
  --brand-soft: var(--c-brand-50);
  --ink: var(--color-text-strong);
  --text: var(--color-text);
  --muted: var(--color-text-muted);
  --bg: var(--color-page);
  --bg-alt: var(--c-n-100);
  --white: var(--color-surface);
  --radius: var(--radius-xl);
  --shadow: var(--shadow-md);
  /* قدیمی: مرز یک خطی که در چند فایل استفاده می‌شد */
  --line: var(--color-border);
  /* پس‌زمینهٔ نرم برای جعبه‌های اطلاع‌رسانی */
  --bg-soft: var(--c-n-50);
  /* اعلان‌های خطا/هشدار قدیمی */
  --danger: var(--color-danger);
}


/* دارک‌مود — بازتعریف نقش‌ها نه معکوس‌کردن رنگ‌ها (website1.md §۲۲)؛ فقط نقش‌های معنایی نگاشت می‌شوند و نسبت‌های کنتراست روی کارت دارک (n-850) سنجیده شده‌اند */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;

    /* ---------- نردبان ارتفاع: زمین ← فرورفته ← کارت ← شناور ---------- */
    /* کارت با یک پله روشن‌تر شدن و مرز خودش از زمین جدا می‌شود، نه با سایه */
    --color-page: var(--c-n-950);
    --color-surface-sunken: var(--c-n-900);
    --color-surface: var(--c-n-850);
    --color-surface-raised: var(--c-n-800);
    /* فوتر و نوار CTA در دارک هم تیره می‌مانند؛ یک پله روشن‌تر تا از زمین جدا شوند */
    --color-surface-inverse: var(--c-brand-800);

    /* ---------- متن ---------- */
    /* سفید خالص فقط برای تیتر؛ متن بدنه n-100 (۱۳٫۶) تا روی زمین عمیق خیره‌کننده نشود */
    --color-text: var(--c-n-100);
    --color-text-strong: var(--c-n-0);
    /* کم‌رنگ = n-400 با ۶٫۰۲؛ n-500 فقط ۳٫۴۳ بود و حد AA (۴٫۵) را رد می‌کرد */
    --color-text-muted: var(--c-n-400);
    /* آیکن تزئینی = n-500 با ۳٫۴۳ (حد ۳:۱)؛ روی متن معمولی استفاده نشود */
    --color-icon-subtle: var(--c-n-500);
    /* --color-text-inverse روشن می‌ماند: هر جا استفاده می‌شود زمینش در هر دو حالت تیره است */
    /* متن روی برند تیره می‌شود چون خودِ برند روشن شده — سفید روی brand-400 فقط ۳٫۲۹ بود */
    --color-text-on-brand: var(--c-n-950);

    /* ---------- برند: روشن‌تر می‌شود تا روی زمین عمیق خوانا بماند ---------- */
    /* brand-600 روی کارت دارک فقط ۲٫۲ بود؛ brand-400 به ۴٫۶۷ می‌رسد */
    --color-brand: var(--c-brand-400);
    --color-brand-hover: var(--c-brand-300);
    --color-brand-active: var(--c-brand-200);
    /* متن تأکیدی برند = brand-200؛ ۱۰٫۱ روی کارت و ۷٫۸ روی سطح ملایم برند */
    --color-brand-ink: var(--c-brand-200);
    --color-brand-subtle: var(--c-brand-800);
    /* مرز برند = brand-500 با ۳٫۰۶ روی کارت — حد ۳:۱ مرزهای رابط */
    --color-brand-border: var(--c-brand-500);

    /* ---------- تأکیدی گرم ---------- */
    --color-accent: var(--c-accent-400);
    /* accent-600 روی کارت دارک ۲٫۶۶ بود؛ accent-200 به ۹٫۹ می‌رسد */
    --color-accent-ink: var(--c-accent-200);
    --color-accent-subtle: var(--c-accent-800);
    --color-accent-border: var(--c-accent-600);
    --color-rating: var(--c-accent-200);

    /* ---------- مرزها: در دارک مرز جای سایه را می‌گیرد ---------- */
    /* n-600 با ۲٫۲۴ لبهٔ کارت را نشان می‌دهد؛ n-700 فقط ۱٫۵۷ بود و ناپیدا می‌شد */
    --color-border: var(--c-n-600);
    /* مرز کنترل‌های فرم باید ۳:۱ باشد — n-500 با ۳٫۴۳ */
    --color-border-strong: var(--c-n-500);
    /* در تیره، لبهٔ کنترل باید روشن‌تر از زمینه شود؛ n-400 روی همهٔ سطوح تیره بالای ۵:۱ است */
    --color-control-border: var(--c-n-400);
    /* n-800 با سطح شناور یکی می‌شد و مرز کارت KPI کامل ناپدید بود؛ n-700 دست‌کم ۱٫۳۸ می‌دهد */
    --color-border-subtle: var(--c-n-700);

    /* ---------- فوکوس: حلقه روی زمین تیره باید روشن باشد ---------- */
    --color-focus: var(--c-brand-300);
    --focus-ring: 0 0 0 3px rgba(143, 189, 178, 0.45);

    /* ---------- وضعیت‌ها: سطح ته‌رنگ عمیق + متن روشن هم‌رنگ ---------- */
    /* پله‌های ۶۰۰/۷۰۰ روی کارت دارک زیر ۳ بودند، پس نقش متن به پلهٔ ۲۰۰ می‌رود */
    --color-success: var(--c-success-200);
    --color-success-ink: var(--c-success-200);
    --color-success-surface: var(--c-success-900);
    --color-success-border: var(--c-success-600);

    --color-warn: var(--c-warn-200);
    --color-warn-ink: var(--c-warn-200);
    --color-warn-surface: var(--c-warn-900);
    --color-warn-border: var(--c-warn-600);

    --color-danger: var(--c-danger-200);
    --color-danger-ink: var(--c-danger-200);
    --color-danger-surface: var(--c-danger-900);
    --color-danger-border: var(--c-danger-600);

    --color-info: var(--c-info-200);
    --color-info-ink: var(--c-info-200);
    --color-info-surface: var(--c-info-900);
    --color-info-border: var(--c-info-600);

    /* ---------- روی زمین تیره ---------- */
    /* خودِ نوار در دارک یک پله روشن‌تر شده، پس متنِ تراشهٔ روشن یک پله عمیق‌تر می‌شود */
    --color-inverse-cta-ink: var(--c-brand-900);
    /* بقیهٔ خانوادهٔ inverse تغییر نمی‌کند: زمینشان در هر دو حالت تیره است */

    /* ---------- اسکلت بارگذاری ---------- */
    --color-skeleton: var(--c-n-850);
    --color-skeleton-highlight: var(--c-n-800);

    /* ---------- سایه: سایهٔ ۴٪ روی زمین تیره دیده نمی‌شود ---------- */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.5);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.55), 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.55);
    --shadow-xl: 0 20px 56px rgba(0, 0, 0, 0.6);

    /* ---------- پوشش تصویر: عمیق‌تر تا لبهٔ تصویر روی زمین تیره گم نشود ---------- */
    --color-overlay-strong: rgba(4, 8, 7, 0.82);
    --color-overlay-media: rgba(4, 8, 7, 0.76);

    /* ---------- پل سازگاری: نام‌های قدیمی که به پریمیتیو روشن قفل بودند ---------- */
    --brand-dark: var(--c-brand-200);
    --brand-light: var(--c-brand-800);
    --brand-soft: var(--c-brand-800);
    --bg-alt: var(--c-n-900);
  }
}