/* ============================================================================
   KPC Time — Design tokens (v8.6.0)
   ----------------------------------------------------------------------------
   یک لایهٔ واحد برای رنگ، تایپ، شعاع، سایه و حرکت.
   قبل از app.css بارگذاری شود.

   قاعده: هیچ رنگ خامی در فایل‌های دیگر نوشته نشود. هر مقدار جدید اول اینجا
   اسم می‌گیرد. تم تیره فقط همین توکن‌ها را بازنویسی می‌کند — نه ۹۱ قاعدهٔ جدا.
   ========================================================================== */

:root {
  color-scheme: light;

  /* ---- palette (خام، مستقل از تم) ---------------------------------------
     این‌ها هرگز با تم عوض نمی‌شوند. هر جا رنگ ثابتی لازم است از این‌ها
     استفاده کنید، نه از توکن‌های معنایی پایین‌تر. */
  --c-white:      #ffffff;
  --c-slate-50:   #f1f5f9;
  --c-slate-200:  #e2e8f0;
  --c-slate-400:  #94a3b8;
  --c-slate-500:  #64748b;
  --c-slate-900:  #0f172a;
  --c-blue-50:    #eef4ff;
  --c-blue-600:   #2563eb;
  --c-amber-500:  #f59e0b;
  --c-yellow-500: #f2b705;
  --c-rose-200:   #fecdd3;
  --c-rose-600:   #e11d48;
  --c-cyan-500:   #06b6d4;

  /* ---- surfaces ---------------------------------------------------------- */
  --page:            #f6f9fd;
  --page-2:          #eef3f9;
  --surface:         var(--c-white);   /* کارت، ورودی، مودال */
  --surface-raised:  var(--c-white);   /* خانهٔ تقویم — در تم تیره روشن‌تر از کارت */
  --surface-2:       var(--c-slate-50);   /* پس‌زمینهٔ فرورفته */
  --surface-3:       var(--c-blue-50);    /* تینت آبی ملایم */
  --surface-nav:     rgba(255,255,255,.94);
  --surface-glass:   rgba(255,255,255,.88);
  --surface-veil:    rgba(255,255,255,.55);

  /* ---- ink --------------------------------------------------------------- */
  --ink:             var(--c-slate-900); /* متن اصلی */
  --ink-2:           var(--c-slate-500); /* متن ثانویه */
  --ink-3:           var(--c-slate-400); /* متن کم‌رنگ */
  --ink-on-brand:    #ffffff;
  --ink-on-glass:    #1e3a5f;
  --ink-outline:     #111827;   /* حلقهٔ «امروز» روی تقویم */

  /* ---- lines ------------------------------------------------------------- */
  --line:            rgba(15,23,42,.09);
  --line-2:          var(--c-slate-200);

  /* ---- brand ------------------------------------------------------------- */
  --brand:           var(--c-blue-600);
  --brand-strong:    #1769e0;
  --brand-soft:      var(--c-blue-50);
  --brand-ink:       var(--c-blue-600); /* متن روی زمینهٔ روشن برند */

  /* ---- shift semantics --------------------------------------------------- */
  --work:            var(--c-amber-500);
  --work-soft:       #fff3c4;
  --work-ink:        #c56a00;

  --rest:            #35b96b;
  --rest-soft:       #dff6e9;
  --rest-ink:        #127046;

  --night:           #4338ca;
  --night-soft:      #e9edff;
  --night-ink:       #4338ca;

  --holiday:         var(--c-rose-600);
  --holiday-soft:    var(--c-rose-200);
  --holiday-ink:     #e11d48;

  /* ---- feedback ---------------------------------------------------------- */
  --danger:          var(--c-rose-600);
  --warning:         var(--c-yellow-500);
  --success:         #24b36b;
  --info:            var(--c-cyan-500);
  --info-ink:        #9a3412;

  /* ---- radius ------------------------------------------------------------ */
  --r-1:  8px;
  --r-2:  12px;
  --r-3:  16px;
  --r-4:  22px;
  --r-5:  28px;
  --r-pill: 999px;
  --r-circle: 50%;

  /* ---- elevation --------------------------------------------------------- */
  --sh-1: 0 2px 8px rgba(22,45,80,.06);
  --sh-2: 0 14px 40px rgba(22,45,80,.08);
  --sh-3: 0 16px 50px rgba(41,61,90,.12);

  /* ---- type scale -------------------------------------------------------- */
  --fs-2xs: 9px;
  --fs-xs:  10px;
  --fs-sm:  11px;
  --fs-md:  12px;
  --fs-lg:  13px;
  --fs-xl:  15px;
  --fs-2xl: 18px;
  --fs-3xl: 21px;
  --fs-4xl: 24px;

  --lh-tight: 1.25;
  --lh-base:  1.6;
  --lh-loose: 2;

  /* ---- fonts (پیش‌فرض؛ app.js با data-text-font بازنویسی می‌کند) ---------- */
  --text-font:   "KPC-IRANYekan", Tahoma, Arial, sans-serif;
  --number-font: var(--text-font);

  /* ---- spacing ----------------------------------------------------------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 22px;
  --sp-6: 30px;

  /* ---- motion ------------------------------------------------------------ */
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 340ms;
  --ease:     cubic-bezier(.2,.7,.3,1);

  /* ---- back-compat aliases ----------------------------------------------
     نام‌های قدیمی که در سه بلوک :root جداگانه تعریف شده بودند. حذف نشوند تا
     زمانی که همهٔ ارجاع‌ها مهاجرت کنند. */
  --bg:           var(--page-2);
  --card:         var(--surface);
  --text:         var(--ink);
  --muted:        var(--ink-2);
  --blue:         var(--brand);
  --green:        var(--success);
  --amber:        var(--warning);
  --red:          var(--danger);
  --purple:       #8b5cf6;
  --shadow:       var(--sh-3);
  --shadow-soft:  var(--sh-2);
  --nav:          var(--surface);
  --accent:       var(--brand-strong);
  --accent-soft:  var(--brand-soft);
  --radius-xl:    26px;
}

/* ============================================================================
   تم تیره — فقط بازنویسی توکن. هیچ قاعدهٔ چیدمانی اینجا نیست.
   ========================================================================== */
body.dark {
  color-scheme: dark;

  --page:            #07111e;
  --page-2:          #0b1625;
  --surface:         #0d1a2b;
  --surface-raised:  #112033;
  --surface-2:       #0c1827;
  --surface-3:       #112033;
  --surface-nav:     rgba(13,26,43,.95);
  --surface-glass:   rgba(20,39,63,.92);
  --surface-veil:    rgba(9,24,43,.45);

  --ink:             #f8fafc;
  --ink-2:           #94a3b8;
  --ink-3:           #7c8ca3;
  --ink-on-glass:    #e5f0ff;
  --ink-outline:     #f8fafc;

  --line:            rgba(255,255,255,.09);
  --line-2:          rgba(255,255,255,.14);

  --brand:           #60a5fa;
  --brand-strong:    #60a5fa;
  --brand-soft:      #16325a;
  --brand-ink:       #bfdbfe;

  --work-soft:       #503811;
  --work-ink:        #fde68a;

  --rest:            #4ade80;
  --rest-soft:       #14351f;
  --rest-ink:        #86efac;

  --night-soft:      #282264;
  --night-ink:       #c7d2fe;

  --holiday-soft:    #4a1220;
  --holiday-ink:     #fda4af;

  --info-ink:        #fecdd3;

  --sh-1: 0 2px 8px rgba(0,0,0,.34);
  --sh-2: 0 14px 40px rgba(0,0,0,.42);
  --sh-3: 0 16px 50px rgba(0,0,0,.5);
}

/* پیروی از تنظیم سیستم — فقط وقتی کاربر گزینهٔ «خودکار» را انتخاب کرده باشد.
   برای فعال‌سازی: document.documentElement.classList.toggle('theme-auto', pref==='auto')
   عمداً opt-in است تا تم ذخیره‌شدهٔ کاربر را بازنویسی نکند. */
@media (prefers-color-scheme: dark) {
  html.theme-auto body:not(.dark) {
    color-scheme: dark;

    --page:          #07111e;
    --page-2:        #0b1625;
    --surface:       #0d1a2b;
    --surface-raised:#112033;
    --surface-2:     #0c1827;
    --surface-3:     #112033;
    --surface-nav:   rgba(13,26,43,.95);
    --surface-glass: rgba(20,39,63,.92);
    --surface-veil:  rgba(9,24,43,.45);

    --ink:           #f8fafc;
    --ink-2:         #94a3b8;
    --ink-3:         #7c8ca3;
    --ink-on-glass:  #e5f0ff;
    --ink-outline:   #f8fafc;

    --line:          rgba(255,255,255,.09);
    --line-2:        rgba(255,255,255,.14);

    --brand:         #60a5fa;
    --brand-strong:  #60a5fa;
    --brand-soft:    #16325a;
    --brand-ink:     #bfdbfe;

    --work-soft:     #503811;
    --work-ink:      #fde68a;
    --rest:          #4ade80;
    --rest-soft:     #14351f;
    --rest-ink:      #86efac;
    --night-soft:    #282264;
    --night-ink:     #c7d2fe;
    --holiday-soft:  #4a1220;
    --holiday-ink:   #fda4af;
    --info-ink:      #fecdd3;
  }
}

/* ============================================================================
   کف کیفیت — چیزهایی که قبلاً اصلاً وجود نداشتند.
   ========================================================================== */

/* ۱) فوکوس صفحه‌کلید. قبل از این صفر مورد focus-visible در پروژه بود. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: var(--r-1);
}
:where(a, button, input, select, textarea, [tabindex]):focus:not(:focus-visible) {
  outline: none;
}

/* ۲) احترام به کاهش حرکت. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ۳) حداقل اندازهٔ ناحیهٔ لمسی روی موبایل (استاندارد ۴۴px). */
@media (pointer: coarse) {
  :where(.bottom-nav .tab, .month-nav, .mini-action, .text-button) {
    min-height: 44px;
    min-width: 44px;
  }
}

/* ۴) انتخاب متن و نوار اسکرول هم‌رنگ برند. */
::selection { background: var(--brand-soft); color: var(--ink); }
* { scrollbar-color: var(--ink-3) transparent; }
