/* ── فونت ─────────────────────────────────────────────────────────────
 *
 * Vazirmatn، از خودِ دامنه. فایل «متغیر» است: یک درخواست، همه‌ی وزن‌ها از
 * ۱۰۰ تا ۹۰۰ — کوچک‌تر از سه فایل جدا و بدون پرشِ وزن هنگام بارگذاری.
 *
 * font-display: block عمدی است. برای یک اپِ نصب‌شده، فونت از کشِ
 * سرویس‌ورکر می‌آید و در عمل آنی است؛ ولی در همان یک بارِ اول، دیدنِ
 * نیم‌ثانیه متنِ نامرئی بهتر از دیدنِ متنِ فارسی با فونتِ اشتباه است، که
 * بعد هم زیر پای کاربر عوض می‌شود.
 */
@font-face {
  font-family: Vazirmatn;
  src: url('../assets/fonts/vazirmatn.woff2') format('woff2-variations'),
       url('../assets/fonts/vazirmatn.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: block;
}

/* Jibok — colour tokens, derived from the app icon.
   Light mode is the default; dark mode applies automatically via
   prefers-color-scheme and can be forced with <html data-theme="dark">. */

:root {
  /* ---- brand ramp (anchored on the icon's own teals) ---- */
  --teal-50:  #E8F8F4;
  --teal-100: #C7EEE5;  /* light zone of the front card */
  --teal-200: #9FE0D2;
  --teal-300: #5FCDB8;
  --teal-400: #2DC5AD;  /* pocket highlight */
  --teal-500: #12A892;
  --teal-600: #018577;  /* icon background, top */
  --teal-700: #016B60;
  --teal-800: #01554C;
  --teal-900: #01463E;  /* icon background, bottom */
  --teal-950: #052E29;

  /* ---- neutrals (slightly teal-cast so they sit with the brand) ---- */
  --ink-950: #0B1614;
  --ink-900: #0E1F1C;
  --ink-700: #2C3F3B;
  --ink-500: #4A5F5B;
  --ink-400: #6B807B;
  --ink-300: #93A9A4;
  --ink-200: #C4D4D0;
  --ink-100: #E2EBE8;
  --ink-50:  #F4F9F7;
  --white:   #FFFFFF;

  /* ---- semantic ---- */
  /* «مثبت» همان رمپِ برند است، نه یک سبزِ جدا. سبزِ قبلی (#127438) با فیروزه‌ی
     primary هم‌روشنایی بود (۱٫۰۹) و در یک قاب کنارِ هم دو رنگ برای یک پیام
     می‌ساختند — چشم آن را ناهماهنگی می‌خواند، نه دو معنا. */
  /* …و یک پله **دورتر** از primary، نه روی خودش: متنِ هم‌رنگِ دکمه‌ها «قابلِ
     زدن» خوانده می‌شود. «مثبت» فقط برای نتیجه و وضعیتِ خوب است (خالصِ مثبت،
     «وصل است»)؛ مبلغِ یک ثبت هیچ رنگی نمی‌گیرد. */
  --positive-light: #01554C;
  --positive-dark:  #5FCDB8;
  --negative-light: #D92D20;
  --negative-dark:  #FF7B72;
  --warning-light:  #B54708;
  /* قرمز باید در هر دو تم پرقدرت‌ترین رنگِ صفحه باشد. زردِ قبلی روی سطحِ
     تاریک ۱۰٫۱ بود و قرمز ۶٫۷: «نزدیکِ سقف» بلندتر از «ردشده» داد می‌زد.
     کهربایی حالا ۶٫۱ است — هنوز خوانا، ولی زیرِ قرمز. */
  --warning-dark:   #C8912A;

  /* ---- حرکت ----
     یک نظام، نه نوزده مدت و هفت منحنی. قاعده: چیزی که **وارد** می‌شود با
     ease-out می‌آید (تند شروع، آرام می‌نشیند)؛ چیزی که **خارج** می‌شود با
     ease-in می‌رود (کاربر منتظرش نیست، نباید وقتش را بگیرد)؛ و چیزی که از
     حالتی به حالتِ دیگر می‌رود، ease-move. منحنیِ جهنده (pop) فقط برای ورودِ
     چیزهای کوچک و شاد. */
  --dur-1: 120ms;   /* لمس، رنگ، حالت */
  --dur-2: 220ms;   /* شیت، نان تست، تعویضِ نما */
  --dur-3: 320ms;   /* قرصِ تب، جابه‌جاییِ بزرگ */
  --ease-out:  cubic-bezier(.32,.72,0,1);
  --ease-in:   cubic-bezier(.4,0,1,1);
  --ease-move: cubic-bezier(.4,0,.2,1);
  --ease-pop:  cubic-bezier(.34,1.4,.64,1);
}

/* ---------------- light ---------------- */
:root,
:root[data-theme="light"] {
  --bg:              var(--white);
  /* پله‌ی زمینه کمی قوی‌تر شد (۱٫۰۵ ← ۱٫۱۲) و حاشیه‌ی کارت در تمِ روشن
     رفت (`--card-edge`): یک حاشیه‌ی ۱٫۲۲ که نه دیده می‌شد نه کاری می‌کرد.
     مرزِ کارت حالا از خودِ اختلافِ سطح می‌آید، مثلِ آیفون. */
  --bg-subtle:       #EDF4F2;
  --surface:         var(--white);
  --surface-raised:  var(--white);
  --border:          var(--ink-100);
  --card-edge:       transparent;
  --border-strong:   var(--ink-200);

  --text:            var(--ink-900);
  --text-muted:      var(--ink-500);
  --text-inverse:    var(--white);

  --primary:         var(--teal-700);
  --primary-hover:   var(--teal-800);
  --primary-active:  var(--teal-900);
  --primary-text:    var(--white);
  --primary-subtle:  var(--teal-50);
  --primary-border:  var(--teal-200);

  /* teal-600 نه 500: حلقه باید روی سفید دست‌کم ۳ باشد (۵۰۰ فقط ۲٫۹۸ است). */
  --focus-ring:      var(--teal-600);

  --positive:        var(--positive-light);
  --negative:        var(--negative-light);
  --warning:         var(--warning-light);

  /* ── جهتِ پول، جدا از «خطا» ─────────────────────────────────────────
     `--negative` فقط برای «چیزی اشکال دارد» است (سقفِ ردشده، سررسیدِ گذشته،
     خطا). سطح‌هایی که فقط **جهت** را نشان می‌دهند — نقطه‌ی تقویم، کارتِ
     «هزینه ماه»، دکمه‌ی «هزینه» — `--outflow` می‌گیرند: آجری، مکملِ فیروزه
     (۱۹° در برابرِ ۱۷۴°). مبلغ در متن هیچ‌کدام را نمی‌گیرد: رنگِ متن،
     جهت با علامت و آیکون. */
  --outflow:         #A8512A;
  --inflow:          var(--positive);

  /* متن و آیکونِ داخلِ قرص‌های هم‌مایه (زمینه‌ی ۱۳ تا ۱۶ درصد از همان رنگ).
     آن وَش زمینه را تیره‌تر می‌کند و کنتراست را می‌خورد: قرمزِ خطا روی سفید
     ۴٫۸۳ است و روی وَشِ خودش ۳٫۹۷. پس روی وَش یک پله تیره‌تر. در تمِ تاریک
     همان رنگ‌ها از قبل قبول‌اند. */
  --on-negative-wash: #9F1D13;
  /* متن روی دکمه‌ی قرمزِ «حذف». سفید روی #D92D20 نسبتِ ۴٫۸ دارد؛ در تمِ تاریک
     قرمز روشن است و متنش تیره، مثلِ دکمه‌ی اصلی. */
  --on-negative:      var(--white);
  --negative-active:  #B42318;
  --on-warning-wash:  #8A3606;

  /* ── پالتِ نمودار: یک ساختار، دو مایه‌ی قرینه ─────────────────────────
     درآمد خودِ رمپِ برند است (یک‌پله‌درمیان)، هزینه همان ساختار در مایه‌ی
     مکمل. روشنایی از بزرگ‌ترین دسته به کوچک‌ترین مرتب است، و در تمِ تاریک
     وارونه می‌شود (بزرگ‌ترین دسته روشن‌ترین برش). هر دو برشِ مجاور، از جمله
     «بقیه»، دست‌کم ۱٫۴۶ فاصله دارند — `_test/a11y.html` اندازه می‌گیرد.
     توکن‌اند نه آرایه‌ی جاوااسکریپت، چون آرایه تمِ تاریک نداشت و دو برش
     روی سطحِ تاریک ناپدید می‌شدند. */
  --slice-out-1: #6E2F1B;  --slice-out-2: #A8512A;  --slice-out-3: #D0803C;
  --slice-out-4: #E6AE72;  --slice-out-5: #F6DCB8;
  --slice-in-1:  var(--teal-900);  --slice-in-2: var(--teal-700);  --slice-in-3: var(--teal-500);
  --slice-in-4:  var(--teal-300);  --slice-in-5: var(--teal-100);
  --slice-rest:  var(--ink-400);

  --shadow-sm: 0 1px 2px rgba(5, 46, 41, .08);
  --shadow-md: 0 4px 12px rgba(5, 46, 41, .10);
  --shadow-lg: 0 12px 32px rgba(5, 46, 41, .14);
}

/* ---------------- dark ---------------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:              var(--ink-950);
    --bg-subtle:       #101C1A;
    --surface:         #131F1D;
    --surface-raised:  #1A2825;
    --border:          #22322F;
    --border-strong:   #2E403C;
    --card-edge:       var(--border);

    --text:            #E4EFEC;
    --text-muted:      var(--ink-300);
    --text-inverse:    var(--ink-950);

    --primary:         var(--teal-400);
    --primary-hover:   var(--teal-300);
    --primary-active:  var(--teal-200);
    --primary-text:    var(--ink-950);
    --primary-subtle:  #10322D;
    --primary-border:  #1C4B44;

    --focus-ring:      var(--teal-300);

    --positive:        var(--positive-dark);
    --negative:        var(--negative-dark);
    --warning:         var(--warning-dark);

    --outflow:         #E0A468;
    --inflow:          var(--positive);
    --on-negative-wash: var(--negative);
    --on-negative:      var(--ink-950);
    --negative-active:  #FFA39D;
    --on-warning-wash:  var(--warning);
    --slice-out-1: #F2CFA3;  --slice-out-2: #E0A468;  --slice-out-3: #C9803F;
    --slice-out-4: #AE5F30;  --slice-out-5: #8C4525;
    --slice-in-1:  var(--teal-100);  --slice-in-2: var(--teal-300);  --slice-in-3: var(--teal-500);
    --slice-in-4:  var(--teal-600);  --slice-in-5: var(--teal-800);
    --slice-rest:  var(--ink-300);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .40);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, .50);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, .60);
  }
}

:root[data-theme="dark"] {
  --bg:              var(--ink-950);
  --bg-subtle:       #101C1A;
  --surface:         #131F1D;
  --surface-raised:  #1A2825;
  --border:          #22322F;
  --border-strong:   #2E403C;
  --card-edge:       var(--border);

  --text:            #E4EFEC;
  --text-muted:      var(--ink-300);
  --text-inverse:    var(--ink-950);

  --primary:         var(--teal-400);
  --primary-hover:   var(--teal-300);
  --primary-active:  var(--teal-200);
  --primary-text:    var(--ink-950);
  --primary-subtle:  #10322D;
  --primary-border:  #1C4B44;

  --focus-ring:      var(--teal-300);

  --positive:        var(--positive-dark);
  --negative:        var(--negative-dark);
  --warning:         var(--warning-dark);

  --outflow:         #E0A468;
  --inflow:          var(--positive);
  --on-negative-wash: var(--negative);
  --on-negative:      var(--ink-950);
  --negative-active:  #FFA39D;
  --on-warning-wash:  var(--warning);
  --slice-out-1: #F2CFA3;  --slice-out-2: #E0A468;  --slice-out-3: #C9803F;
  --slice-out-4: #AE5F30;  --slice-out-5: #8C4525;
  --slice-in-1:  var(--teal-100);  --slice-in-2: var(--teal-300);  --slice-in-3: var(--teal-500);
  --slice-in-4:  var(--teal-600);  --slice-in-5: var(--teal-800);
  --slice-rest:  var(--ink-300);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .40);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, .50);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, .60);
}

body {
  background: var(--bg);
  color: var(--text);
}