/* SAMT POINT — توکن‌های طراحی
 *
 * همه‌چیز از زبان بصری کاتالوگ سَمت گرفته شده است:
 *   کاغذ خاکستری سرد، مرکبِ نزدیک به سیاه، آبی فولادی فقط برای نشانه‌ها،
 *   Michroma برای لاتین (کیکر، کد، عدد) و Vazirmatn برای فارسی.
 *
 * دو تم: «paper» (صفحات روشن کاتالوگ) و «ink» (صفحه‌ی تیره‌ی پایانی).
 * کامپوننت‌ها فقط توکن‌های معنایی (بخش ۲) را می‌خوانند، نه رنگ خام.
 * فونت‌ها لوکال‌اند — بدون CDN.
 */

@font-face {
  font-family: "Vazirmatn";
  src: url("../fonts/Vazirmatn-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Michroma";
  src: url("../fonts/Michroma-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  /* فقط لاتین؛ حروف فارسی خودکار به Vazirmatn می‌افتند */
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}

/* ------------------------------------------------------------------ *
 * ۱. مقادیر خام
 * ------------------------------------------------------------------ */

:root {
  /* خاکستری سرد — n-200 همان کاغذ کاتالوگ است، n-950 همان صفحه‌ی تیره */
  --n-0: #ffffff;
  --n-50: #f6f7f8;
  --n-100: #eff0f2;
  --n-150: #e8e9eb;
  --n-200: #e0e1e3;
  --n-300: #d4d5d9;
  --n-400: #c6c7cb;
  --n-500: #9a9ca3;
  --n-600: #6e7078;
  --n-700: #5a5d64;
  --n-800: #3a3d43;
  --n-850: #2b2d33;
  --n-900: #1f2024;
  --n-950: #18191d;
  --n-1000: #111215;

  /* آبی فولادی */
  --b-100: #dce8f3;
  --b-200: #b9d3ea;
  --b-300: #74abdc;
  --b-400: #4f8fc6;
  --b-500: #3a7cb0;
  --b-600: #2a6699;
  --b-700: #1f5280;
  --b-900: #14293b;
  --b-glow: #cfe8ff;

  /* خانواده‌ی حروف */
  --font-fa: "Vazirmatn", Tahoma, "Segoe UI", sans-serif;
  --font-display: "Michroma", "Eurostile Extended", "Microgramma D Extended",
    "Vazirmatn", sans-serif;

  /* مقیاس حروف — فارسی به فاصله‌ی سطر بازتر نیاز دارد */
  --fs-display: clamp(2rem, 1.15rem + 3.4vw, 3.5rem);
  --fs-h1: clamp(1.625rem, 1.2rem + 1.7vw, 2.375rem);
  --fs-h2: clamp(1.25rem, 1.12rem + 0.5vw, 1.5rem);
  --fs-h3: 1.0625rem;
  --fs-body: 1rem;
  --fs-sm: 0.875rem;
  --fs-xs: 0.78125rem;
  --fs-kicker: 0.6875rem;

  --lh-tight: 1.3;
  --lh-snug: 1.55;
  --lh-body: 1.95;

  /* فاصله‌ی حروف فقط برای لاتین؛ هرگز روی متن فارسی */
  --track-kicker: 0.26em;
  --track-word: 0.3em;
  --track-code: 0.08em;

  /* فاصله‌گذاری — پایه‌ی ۴ */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-14: 56px;
  --s-18: 72px;
  --s-24: 96px;

  /* گردی گوشه */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-pill: 999px;

  /* حرکت */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in-out: cubic-bezier(0.6, 0, 0.2, 1);
  --dur-1: 120ms;
  --dur-2: 220ms;
  --dur-3: 380ms;

  /* چیدمان */
  --container: 1120px;
  --gutter: clamp(16px, 4vw, 40px);
  --topbar-h: 64px;

  /* لایه‌ها */
  --z-rail: 15;
  --z-bar: 20;
  --z-notice: 30;
  --z-sheet: 50;
  --z-toast: 60;
}

/* ------------------------------------------------------------------ *
 * ۲. توکن‌های معنایی — تم paper (پیش‌فرض)
 * ------------------------------------------------------------------ */

:root,
[data-theme="paper"] {
  color-scheme: light;

  --bg: var(--n-200);
  --bg-shade: var(--n-300);
  --surface: #ebecee;
  --surface-raised: #f3f4f5;
  --surface-sunken: #d8d9dd;
  --surface-edge: rgb(255 255 255 / 0.8);

  --text-1: #16171b;
  --text-2: var(--n-800);
  --text-3: var(--n-700);
  --text-faint: #7c7e86;

  --line: var(--n-400);
  --line-strong: #8e9097;
  --line-faint: rgb(22 23 27 / 0.08);

  --accent: var(--b-600);
  --accent-graphic: var(--b-500);
  --accent-hover: var(--b-700);
  --accent-tint: rgb(58 124 176 / 0.1);
  --accent-ring: rgb(58 124 176 / 0.42);
  --glow: var(--b-400);

  --primary-bg: #16171b;
  --primary-fg: var(--n-50);
  --primary-hover: var(--n-850);

  --ok: #2b7355;
  --ok-tint: rgb(43 115 85 / 0.1);
  --ok-line: rgb(43 115 85 / 0.35);
  --warn: #8a5f10;
  --warn-tint: rgb(176 125 27 / 0.13);
  --warn-line: rgb(150 105 20 / 0.4);
  --danger: #a8352b;
  --danger-tint: rgb(168 53 43 / 0.09);
  --danger-line: rgb(168 53 43 / 0.38);
  --star: #a97912;

  --panel-grad: linear-gradient(140deg, #eef1f4, #e4eaf0);
  --panel-line: #c3d2e0;

  --scrim: rgb(22 23 27 / 0.32);
  --shadow-1: 0 1px 2px rgb(22 23 27 / 0.05);
  --shadow-2: 0 1px 1px rgb(22 23 27 / 0.04), 0 12px 32px -16px rgb(22 23 27 / 0.2);
  --shadow-3: 0 2px 4px rgb(22 23 27 / 0.05), 0 28px 64px -24px rgb(22 23 27 / 0.34);
}

/* ------------------------------------------------------------------ *
 * ۳. تم ink — نمایشگر همیشه؛ بقیه‌ی صفحات وقتی سیستم کاربر تیره است
 * ------------------------------------------------------------------ */

[data-theme="ink"] {
  color-scheme: dark;

  --bg: var(--n-950);
  --bg-shade: var(--n-1000);
  --surface: var(--n-900);
  --surface-raised: #26282d;
  --surface-sunken: #131417;
  --surface-edge: rgb(255 255 255 / 0.06);

  --text-1: #f5f6f7;
  --text-2: #b7bdc5;
  --text-3: #8d939b;
  --text-faint: #6b7078;

  --line: #303136;
  --line-strong: #484c54;
  --line-faint: rgb(255 255 255 / 0.06);

  --accent: var(--b-300);
  --accent-graphic: #5b9ad2;
  --accent-hover: #9cc4e8;
  --accent-tint: rgb(116 171 220 / 0.12);
  --accent-ring: rgb(116 171 220 / 0.5);
  --glow: var(--b-glow);

  --primary-bg: #f5f6f7;
  --primary-fg: #16171b;
  --primary-hover: #dcdde0;

  --ok: #74cfa4;
  --ok-tint: rgb(116 207 164 / 0.12);
  --ok-line: rgb(116 207 164 / 0.35);
  --warn: #e3ba6a;
  --warn-tint: rgb(227 186 106 / 0.12);
  --warn-line: rgb(227 186 106 / 0.35);
  --danger: #f2938a;
  --danger-tint: rgb(242 147 138 / 0.12);
  --danger-line: rgb(242 147 138 / 0.38);
  --star: #f0c766;

  --panel-grad: linear-gradient(140deg, #1c232b, #1e2b33);
  --panel-line: #2c4356;

  --scrim: rgb(8 9 11 / 0.58);
  --shadow-1: 0 1px 2px rgb(0 0 0 / 0.4);
  --shadow-2: 0 1px 1px rgb(0 0 0 / 0.3), 0 14px 34px -14px rgb(0 0 0 / 0.7);
  --shadow-3: 0 2px 4px rgb(0 0 0 / 0.3), 0 30px 70px -20px rgb(0 0 0 / 0.85);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;

    --bg: var(--n-950);
    --bg-shade: var(--n-1000);
    --surface: var(--n-900);
    --surface-raised: #26282d;
    --surface-sunken: #131417;
    --surface-edge: rgb(255 255 255 / 0.06);

    --text-1: #f5f6f7;
    --text-2: #b7bdc5;
    --text-3: #8d939b;
    --text-faint: #6b7078;

    --line: #303136;
    --line-strong: #484c54;
    --line-faint: rgb(255 255 255 / 0.06);

    --accent: var(--b-300);
    --accent-graphic: #5b9ad2;
    --accent-hover: #9cc4e8;
    --accent-tint: rgb(116 171 220 / 0.12);
    --accent-ring: rgb(116 171 220 / 0.5);
    --glow: var(--b-glow);

    --primary-bg: #f5f6f7;
    --primary-fg: #16171b;
    --primary-hover: #dcdde0;

    --ok: #74cfa4;
    --ok-tint: rgb(116 207 164 / 0.12);
    --ok-line: rgb(116 207 164 / 0.35);
    --warn: #e3ba6a;
    --warn-tint: rgb(227 186 106 / 0.12);
    --warn-line: rgb(227 186 106 / 0.35);
    --danger: #f2938a;
    --danger-tint: rgb(242 147 138 / 0.12);
    --danger-line: rgb(242 147 138 / 0.38);
    --star: #f0c766;

    --panel-grad: linear-gradient(140deg, #1c232b, #1e2b33);
    --panel-line: #2c4356;

    --scrim: rgb(8 9 11 / 0.58);
    --shadow-1: 0 1px 2px rgb(0 0 0 / 0.4);
    --shadow-2: 0 1px 1px rgb(0 0 0 / 0.3), 0 14px 34px -14px rgb(0 0 0 / 0.7);
    --shadow-3: 0 2px 4px rgb(0 0 0 / 0.3), 0 30px 70px -20px rgb(0 0 0 / 0.85);
  }
}