/* ══════════════════════════════════════════════════════════════════
   کیهان — توکن‌های طراحی (تنها منبع حقیقت برای رنگ، فاصله و تایپوگرافی)
   ------------------------------------------------------------------
   هر رنگ، فاصله، گردی گوشه و اندازه‌ی فونت در سامانه باید از اینجا
   بیاید. رنگ دستی (مثل #16a34a) در قالب‌ها ننویسید.

   ساختار:
     ۱) پالت خام      — رنگ‌های پایه، بدون معنا
     ۲) توکن معنایی   — «سطح»، «متن»، «درآمد»، «هزینه» …
     ۳) مقیاس‌ها       — فاصله، گردی، سایه، تایپوگرافی
     ۴) حالت شب       — بازتعریف توکن‌های معنایی
══════════════════════════════════════════════════════════════════ */

:root {
  /* ─── ۱) پالت خام ─────────────────────────────────────────── */

  /* برند — طلایی کیهان. atlas-brand رنگ رسمی داخل لوگو است و در هر دو
     حالت روز و شب یکسان می‌ماند؛ بقیه‌ی پله‌ها برای متن و پس‌زمینه‌ی ملایم‌اند. */
  --atlas-brand: #FFB800;
  --gold-50:  #FDF8EC;
  --gold-100: #FAEBC7;
  --gold-200: #F5DCA0;
  --gold-300: #EFC873;
  --gold-400: #E8B44A;   /* ← رنگ اصلی برند */
  --gold-500: #D69C25;
  --gold-600: #B37F14;
  --gold-700: #8A6410;   /* خوانا روی پس‌زمینه‌ی روشن */
  --gold-800: #5C420A;
  --gold-900: #33240A;

  /* خنثای گرم — پس‌زمینه، متن، خطوط */
  --neutral-0:   #FFFFFF;
  --neutral-25:  #FAF9F7;
  --neutral-50:  #F7F6F4;
  --neutral-100: #F1F0ED;
  --neutral-200: #E6E4DF;
  --neutral-300: #D5D2CB;
  --neutral-400: #B0ACA3;
  --neutral-500: #85817A;
  --neutral-600: #6B6862;
  --neutral-700: #4A4843;
  --neutral-800: #2B2A27;
  --neutral-900: #1C1B19;
  --neutral-950: #131211;

  /* سبز — درآمد و موفقیت */
  --green-50:  #F0FDF4;
  --green-100: #DCFCE7;
  --green-500: #16A34A;
  --green-600: #15803D;
  --green-700: #14532D;
  --green-300: #4ADE80;

  /* قرمز — هزینه و خطا */
  --red-50:  #FEF2F2;
  --red-100: #FEE2E2;
  --red-500: #DC2626;
  --red-600: #B91C1C;
  --red-700: #7F1D1D;
  --red-300: #F87171;

  /* کهربایی — هشدار */
  --amber-50:  #FFFBEB;
  --amber-100: #FEF3C7;
  --amber-500: #F59E0B;
  --amber-600: #B45309;
  --amber-300: #FBBF24;

  /* آبی — اطلاع‌رسانی */
  --blue-50:  #EFF6FF;
  --blue-100: #DBEAFE;
  --blue-500: #2563EB;
  --blue-600: #1D4ED8;
  --blue-300: #93C5FD;


  /* ─── ۲) توکن‌های معنایی ───────────────────────────────────── */

  /* سطوح */
  --surface-page:    var(--neutral-50);   /* پس‌زمینه‌ی کل صفحه */
  --surface-card:    var(--neutral-0);    /* کارت‌ها */
  --surface-sunken:  var(--neutral-100);  /* سربرگ جدول، بخش فرورفته */
  --surface-raised:  var(--neutral-0);    /* مودال، پاپ‌آور */
  /* hover باید محسوس‌تر از راه‌راه باشد، وگرنه ردیف زیر نشانگر گم می‌شود */
  --surface-hover:   rgba(0, 0, 0, 0.06);
  --surface-zebra:   rgba(0, 0, 0, 0.025);  /* راه‌راه ملایم ردیف زوج جدول */
  --field-fill:      rgba(0, 0, 0, 0.03);   /* پس‌زمینه‌ی ورودی داخل پاپ‌آپ */
  --scrim:           rgba(0, 0, 0, 0.25);  /* پرده‌ی پشت پاپ‌آپ */
  --ring:            rgba(28, 27, 25, 0.12);
  --on-solid:        #FFFFFF;   /* متن روی دکمه‌ی سبز/قرمز پُر */

  /* متن */
  --text-strong: var(--neutral-900);  /* عنوان و عدد مهم */
  --text-body:   var(--neutral-800);  /* متن اصلی */
  --text-muted:  var(--neutral-600);  /* برچسب و توضیح */
  /* neutral-400 روی سفید فقط ۲٫۲۶:۱ می‌داد — برای placeholder خیلی کم‌رنگ بود */
  --text-faint:  var(--neutral-500);  /* غیرفعال و placeholder */

  /* خطوط */
  --border-strong: var(--neutral-300); /* حاشیه‌ی ورودی */
  --border-subtle: var(--neutral-200); /* جداکننده‌ی جدول و کارت */

  /* برند — طلاییِ رسمی در هر دو حالت یکی است تا با لوگو و اطلس بخواند.
     فقط brand-ink فرق می‌کند: طلایی روی سفید خوانا نیست، پس متن و لینک
     طلایی از gold-700 می‌آید (۵٫۳۷:۱) نه از خود رنگ برند (۱٫۷:۱). */
  --brand:       var(--atlas-brand); /* پس‌زمینه‌ی دکمه، نوار تأکید */
  --brand-on:    #141414;            /* متن روی پس‌زمینه‌ی برند */
  --brand-ink:   var(--gold-700);    /* متن، لینک و آیکون طلایی */
  --brand-soft:  var(--gold-100);  /* پس‌زمینه‌ی ملایم برند */
  --brand-edge:  var(--gold-500);  /* حاشیه‌ی فوکوس */
  --brand-hover: var(--gold-500);  /* دکمه‌ی برند در حالت hover */
  --brand-ring:  rgba(214, 156, 37, 0.35);  /* حلقه‌ی فوکوس */
  --orbit-line:  rgba(28, 27, 25, 0.06);    /* خطوط مدار تزئینی */

  /* درآمد / موفقیت.
     green-600 روی سطح فرورفته فقط ۴٫۴:۱ می‌داد؛ کمی تیره‌تر شد تا روی
     هر سه سطح (کارت، صفحه، فرورفته) از ۴٫۵ رد شود. */
  --income:      var(--green-500);
  --income-ink:  #11702F;
  --income-soft: var(--green-100);
  --income-on:   var(--green-700);

  /* هزینه / خطر */
  --expense:      var(--red-500);
  --expense-ink:  var(--red-600);
  --expense-soft: var(--red-100);
  --expense-on:   var(--red-700);

  /* هشدار */
  --warn:      var(--amber-500);
  --warn-ink:  var(--amber-600);
  --warn-soft: var(--amber-100);
  --warn-on:   var(--gold-800);

  /* اطلاع */
  --info:      var(--blue-500);
  --info-ink:  var(--blue-600);
  --info-soft: var(--blue-100);
  --info-on:   var(--blue-600);


  /* ─── ۳) مقیاس‌ها ──────────────────────────────────────────── */

  /* فاصله — مضرب ۴ */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;

  /* گردی گوشه — هم‌مقیاس با اطلس (که --radius: 0.25rem دارد).
     زبان بصری اطلس تقریباً تیزگوشه است: پنل‌ها بدون گردی، عناصر
     تعاملی ۴ پیکسل، چیپ‌ها ۲ پیکسل. قرص‌شکل فقط برای نقطه و دایره. */
  --radius-xs:   2px;   /* چیپ و تگ */
  --radius-sm:   3px;
  --radius-md:   4px;   /* دکمه، ورودی، مودال ← پرکاربردترین */
  --radius-lg:   6px;
  --radius-xl:  10px;
  --radius-full: 999px; /* فقط نقطه و آواتار */

  /* سایه — گرم و ملایم */
  --shadow-sm: 0 1px 2px rgba(28, 27, 25, 0.05);
  --shadow-md: 0 1px 3px rgba(28, 27, 25, 0.06), 0 4px 12px rgba(28, 27, 25, 0.05);
  --shadow-lg: 0 4px 12px rgba(28, 27, 25, 0.08), 0 16px 40px rgba(28, 27, 25, 0.10);

  /* تایپوگرافی */
  --font-sans: 'Peyda', 'Tahoma', Arial, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, monospace;

  --text-xs:   11px;
  --text-sm:   12.5px;
  --text-base: 14px;
  --text-md:   15px;
  --text-lg:   18px;
  --text-xl:   22px;
  --text-2xl:  28px;

  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semi:   600;
  --weight-bold:   700;

  /* نمودارها — رنگ دسته‌ها. Chart.js اینها را در زمان اجرا می‌خواند. */
  --chart-1: #F59E0B;
  --chart-2: #06B6D4;
  --chart-3: #A855F7;
  --chart-4: #84CC16;
  --chart-5: #EC4899;
  --chart-6: #6366F1;
  --chart-7: #F97316;
  --chart-8: #14B8A6;

  /* حرکت */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 0.12s;
  --dur-base: 0.2s;
}


/* ─── ۴) حالت شب ──────────────────────────────────────────────
   فقط توکن‌های معنایی بازتعریف می‌شوند — پالت خام دست‌نخورده می‌ماند.
────────────────────────────────────────────────────────────── */

/* مقادیر دقیقاً با سامانه‌ی «اطلس کیهان» یکی است تا دو محصول یک زبان
   بصری داشته باشند. اطلس فقط حالت تیره دارد و همین پالت را استفاده می‌کند. */
:root[data-theme="dark"] {
  --surface-page:    #101010;
  --surface-card:    #1A1A1A;
  --surface-sunken:  #151515;
  --surface-raised:  #1F1F1F;
  /* حالت hover و راه‌راه جدول قبلاً ۶٪/بدون‌راه‌راه بودند — عملاً از هم
     قابل تشخیص نبودند در نشست‌های طولانی؛ اندازه‌گیری شد و تقویت شد. */
  --surface-hover:   rgba(255, 255, 255, 0.10);
  --surface-zebra:   rgba(255, 255, 255, 0.04);  /* راه‌راه ملایم ردیف زوج جدول */
  --field-fill:      rgba(255, 255, 255, 0.04);
  --scrim:           rgba(0, 0, 0, 0.10);
  --ring:            rgba(244, 244, 244, 0.10);
  --on-solid:        #141414;

  /* سفید خالص روی زمینه‌ی تقریباً مشکی باعث خیرگی (halation) در
     نشست‌های طولانی می‌شود — به‌جای #FFFFFF/#F4F4F4 از سفیدِ ملایم‌تر
     با گرمای اندک (هم‌راستا با برند طلایی) استفاده می‌شود. توصیه‌ی
     Material Design هم برای متن پرکنتراست، سفیدِ کامل نیست. */
  --text-strong: #ECEAE6;
  --text-body:   #D9D9D9;
  --text-muted:  #A1A1A1;
  /* #6B6B6B روی کارت فقط ۳٫۲۷:۱ بود — placeholder عملاً خوانده نمی‌شد */
  --text-faint:  #858585;

  /* حاشیه‌ها و جداکننده‌های جدول قبلاً ۱۰٪/۱۴٪ بودند (کنتراست ~۱٫۳:۱) —
     تقویت شد تا واقعاً به چشم بیایند، بدون از دست دادن حس «تیره». */
  --border-strong: rgba(255, 255, 255, 0.26);
  --border-subtle: rgba(255, 255, 255, 0.18);

  --brand:       var(--atlas-brand);
  --brand-on:    #141414;
  --brand-ink:   var(--atlas-brand);
  --brand-soft:  rgba(255, 184, 0, 0.12);
  --brand-edge:  var(--atlas-brand);
  --brand-hover: rgba(255, 184, 0, 0.80);
  --brand-ring:  rgba(255, 184, 0, 0.35);
  --orbit-line:  rgba(255, 255, 255, 0.07);

  --income:      var(--green-300);
  --income-ink:  var(--green-300);
  --income-soft: rgba(74, 222, 128, 0.12);
  --income-on:   #BBF7D0;

  --expense:      #F87171;
  --expense-ink:  #F87171;
  --expense-soft: rgba(248, 113, 113, 0.12);
  --expense-on:   #FECACA;

  --warn:      var(--amber-300);
  --warn-ink:  var(--amber-300);
  --warn-soft: rgba(251, 191, 36, 0.12);
  --warn-on:   #FDE68A;

  --info:      var(--blue-300);
  --info-ink:  var(--blue-300);
  --info-soft: rgba(147, 197, 253, 0.12);
  --info-on:   #BFDBFE;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 1px 3px rgba(0, 0, 0, 0.45), 0 4px 12px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.5), 0 16px 40px rgba(0, 0, 0, 0.45);
}