/**
 * MyOstad Platform — Design Tokens
 *
 * @file       assets/css/public/tokens.css
 * @version    1.0.0 (Feb 2026)
 * @author     MyOstad Recovery Unit
 *
 * ╔══════════════════════════════════════════════════════════════╗
 * ║  این فایل SINGLE SOURCE OF TRUTH برای همه CSS tokenهاست    ║
 * ║  هیچ فایل دیگری نباید رنگ، فونت، یا spacing تعریف کند     ║
 * ║  ترتیب لود: tokens → design-system → layout → components    ║
 * ╚══════════════════════════════════════════════════════════════╝
 *
 * @layer cascade order:
 *   base       — :root tokens, resets
 *   theme      — data-theme overrides (dark / light)
 *   accent     — data-color overrides (8 رنگ)
 *   components — کامپوننت‌های عمومی
 *   utilities  — override helpers (جایگزین !important)
 */

/* ── Layer Declaration (اول از همه — ترتیب specificity را کنترل می‌کند) ── */
@layer base, theme, accent, components, utilities;

/* ════════════════════════════════════════════════════
   LAYER: base
   همه tokenهای پایه — بدون وابستگی به تم یا رنگ
   ════════════════════════════════════════════════════ */
@layer base {

    /* ── Typography ─────────────────────────────────── */
    :root {
        --mo-font-main:   'Vazirmatn', 'Tahoma', sans-serif;
        --mo-font-mono:   'JetBrains Mono', 'Fira Code', monospace;
        --mo-font-size-xs:   0.75rem;   /* 12px */
        --mo-font-size-sm:   0.875rem;  /* 14px */
        --mo-font-size-base: 1rem;      /* 16px */
        --mo-font-size-md:   1.0625rem; /* 17px */
        --mo-font-size-lg:   1.125rem;  /* 18px */
        --mo-font-size-xl:   1.25rem;   /* 20px */
        --mo-font-size-2xl:  1.5rem;    /* 24px */
        --mo-font-size-3xl:  1.875rem;  /* 30px */
        --mo-font-size-4xl:  2.25rem;   /* 36px */

        --mo-font-weight-regular: 400;
        --mo-font-weight-medium:  500;
        --mo-font-weight-bold:    700;
        --mo-font-weight-black:   900;

        --mo-line-height-tight:  1.3;
        --mo-line-height-normal: 1.6;
        --mo-line-height-loose:  1.85;
    }

    /* ── Spacing ─────────────────────────────────────── */
    :root {
        --mo-space-1:  4px;
        --mo-space-2:  8px;
        --mo-space-3:  12px;
        --mo-space-4:  16px;
        --mo-space-5:  20px;
        --mo-space-6:  24px;
        --mo-space-8:  32px;
        --mo-space-10: 40px;
        --mo-space-12: 48px;
        --mo-space-16: 64px;
        --mo-space-20: 80px;
    }

    /* ── Border Radius ───────────────────────────────── */
    :root {
        --mo-radius-xs:   6px;
        --mo-radius-sm:   8px;
        --mo-radius-md:   12px;
        --mo-radius-lg:   16px;
        --mo-radius-xl:   20px;
        --mo-radius-2xl:  24px;
        --mo-radius-full: 9999px;
    }

    /* ── Breakpoints (فقط برای JS — CSS از media query استفاده کند) ── */
    :root {
        --mo-bp-xs:  480px;
        --mo-bp-sm:  640px;
        --mo-bp-md:  768px;
        --mo-bp-lg:  1024px;
        --mo-bp-xl:  1280px;
        --mo-bp-2xl: 1440px;
    }

    /* ── Z-index Scale ───────────────────────────────── */
    :root {
        --mo-z-base:    0;
        --mo-z-raised:  10;
        --mo-z-sticky:  100;
        --mo-z-header:  200;
        --mo-z-overlay: 400;
        --mo-z-modal:   500;
        --mo-z-toast:   600;
        --mo-z-max:     9999;
    }

    /* ── Transitions ─────────────────────────────────── */
    :root {
        --mo-transition-fast:   150ms ease;
        --mo-transition-base:   250ms ease;
        --mo-transition-slow:   400ms ease;
        --mo-transition-bounce: 350ms cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    /* ── Shadows ─────────────────────────────────────── */
    :root {
        --mo-shadow-xs:  0 1px 3px rgba(0,0,0,0.12);
        --mo-shadow-sm:  0 4px 12px rgba(0,0,0,0.15);
        --mo-shadow-md:  0 8px 24px rgba(0,0,0,0.2);
        --mo-shadow-lg:  0 16px 48px rgba(0,0,0,0.28);
        --mo-shadow-xl:  0 24px 64px rgba(0,0,0,0.38);
    }

    /* ── Glass & Blur ────────────────────────────────── */
    :root {
        --mo-glass-blur:    15px;
        --mo-glass-blur-sm: 8px;
        --mo-glass-blur-lg: 30px;
    }

    /* ── Layout ──────────────────────────────────────── */
    :root {
        --mo-container-max: 1440px;
        --mo-header-height: 72px;
        --mo-sidebar-width: 260px;
        --mo-bottom-bar-height: 64px;
    }

    /* ── Semantic Palette (رنگ‌های وضعیت — مستقل از تم) ── */
    :root {
        --mo-color-success:      #22c55e;
        --mo-color-success-bg:   rgba(34,197,94,0.12);
        --mo-color-warning:      #f59e0b;
        --mo-color-warning-bg:   rgba(245,158,11,0.12);
        --mo-color-danger:       #ef4444;
        --mo-color-danger-bg:    rgba(239,68,68,0.12);
        --mo-color-info:         #3b82f6;
        --mo-color-info-bg:      rgba(59,130,246,0.12);
        --mo-color-gold:         #f59e0b;
        --mo-color-gold-glow:    rgba(245,158,11,0.35);
    }

    /* ── Navy Palette (legacy vars — برای backward compat) ── */
    :root {
        --navy-500: #2563eb;
        --navy-600: #1d4ed8;
        --navy-800: #0f2044;
        --navy-900: #050c1a;
    }

    /* ── Legacy aliases — نگه‌داری backward compat با کد قدیمی ── */
    :root {
        --primary:         var(--mo-accent, #2563eb);
        --primary-rgb:     59, 130, 246;
        --primary-light:   color-mix(in srgb, var(--mo-accent) 15%, transparent);
        --link:            var(--mo-accent);
        --danger:          var(--mo-color-danger);
        --error:           var(--mo-color-danger);
        --surface-1:       var(--mo-bg-card);
        --surface-2:       var(--mo-bg-surface);
        --ghost:           var(--mo-bg-card);
        --muted-text:      var(--mo-text-low);
        --placeholder:     var(--mo-text-low);
        --border-subtle:   var(--mo-border);
        --active:          var(--mo-accent);
        --font-fa:         var(--mo-font-main);
        --sun:             #f59e0b;
        --moon:            #a5b4fc;

        /* breakpoint aliases (legacy) */
        --xs:   var(--mo-bp-xs);
        --sm:   var(--mo-bp-sm);
        --md:   var(--mo-bp-md);
        --full: var(--mo-container-max);
    }

    /* ── Fallback Accent (قبل از data-color اعمال) ─── */
    :root {
        --mo-accent:      #2563eb;
        --mo-accent-glow: rgba(37,99,235,0.30);
        --mo-accent-rgb:  37, 99, 235;
    }

}
/* ── End @layer base ─────────────────────────────────────────── */


/* ════════════════════════════════════════════════════
   LAYER: theme
   data-theme="dark" | "light"
   ════════════════════════════════════════════════════ */
@layer theme {

    /* ── DARK (پیش‌فرض) ──────────────────────────────── */
    :root,
    [data-theme="dark"] {
        --mo-bg-main:      #050c1a;
        --mo-bg-surface:   #0d1426;
        --mo-bg-card:      rgba(13,20,38,0.70);
        --mo-bg-elevated:  rgba(15,32,68,0.90);

        --mo-text-high:    #ffffff;
        --mo-text-mid:     #a0aec0;
        --mo-text-low:     #64748b;
        --mo-text-inverse: #050c1a;

        --mo-border:       rgba(255,255,255,0.10);
        --mo-border-subtle:rgba(255,255,255,0.06);
        --mo-border-strong:rgba(255,255,255,0.18);

        --mo-hero-gradient: radial-gradient(
            circle at 50% 0%,
            rgba(0,33,74,0.80) 0%,
            #050c1a 70%
        );

        /* shadow (دارک — سایه‌ها خیلی دیده نمی‌شن) */
        --mo-shadow-sm:  0 4px 12px rgba(0,0,0,0.40);
        --mo-shadow-md:  0 8px 24px rgba(0,0,0,0.50);
        --mo-shadow-lg:  0 16px 48px rgba(0,0,0,0.60);

        /* legacy navy */
        --navy-800: #0f2044;
        --navy-900: #050c1a;
    }

    /* ── LIGHT ───────────────────────────────────────── */
    [data-theme="light"] {
        --mo-bg-main:       #f8fafc;
        --mo-bg-surface:    #ffffff;
        --mo-bg-card:       rgba(255,255,255,0.85);
        --mo-bg-elevated:   rgba(255,255,255,0.98);

        --mo-text-high:     #00214a;
        --mo-text-mid:      #475569;
        --mo-text-low:      #94a3b8;
        --mo-text-inverse:  #ffffff;

        --mo-border:        rgba(0,33,74,0.08);
        --mo-border-subtle: rgba(0,33,74,0.05);
        --mo-border-strong: rgba(0,33,74,0.14);

        --mo-hero-gradient: radial-gradient(
            circle at 50% 0%,
            #eef2ff 0%,
            #f8fafc 100%
        );

        /* shadow (لایت — واضح‌تر) */
        --mo-shadow-sm:  0 4px 12px rgba(0,33,74,0.08);
        --mo-shadow-md:  0 8px 24px rgba(0,33,74,0.12);
        --mo-shadow-lg:  0 16px 48px rgba(0,33,74,0.16);

        /* legacy navy در لایت */
        --navy-800: #1e3a5f;
        --navy-900: #0f2044;
    }

}
/* ── End @layer theme ────────────────────────────────────────── */


/* ════════════════════════════════════════════════════
   LAYER: accent
   data-color="blue|indigo|purple|pink|rose|teal|green|orange"
   هر رنگ: accent + glow + rgb + light variant
   ════════════════════════════════════════════════════ */
@layer accent {

    [data-color="blue"] {
        --mo-accent:      #3b82f6;
        --mo-accent-glow: rgba(59,130,246,0.35);
        --mo-accent-rgb:  59, 130, 246;
        --mo-accent-dark: #1d4ed8;
        --mo-accent-light:rgba(59,130,246,0.12);
        /* legacy */
        --primary:        #3b82f6;
        --primary-rgb:    59, 130, 246;
        --navy-500:       #3b82f6;
        --navy-600:       #2563eb;
    }

    [data-color="indigo"] {
        --mo-accent:      #6366f1;
        --mo-accent-glow: rgba(99,102,241,0.35);
        --mo-accent-rgb:  99, 102, 241;
        --mo-accent-dark: #4338ca;
        --mo-accent-light:rgba(99,102,241,0.12);
        /* legacy */
        --primary:        #6366f1;
        --primary-rgb:    99, 102, 241;
        --navy-500:       #6366f1;
        --navy-600:       #4f46e5;
    }

    [data-color="purple"] {
        --mo-accent:      #a855f7;
        --mo-accent-glow: rgba(168,85,247,0.35);
        --mo-accent-rgb:  168, 85, 247;
        --mo-accent-dark: #7e22ce;
        --mo-accent-light:rgba(168,85,247,0.12);
        /* legacy */
        --primary:        #a855f7;
        --primary-rgb:    168, 85, 247;
        --navy-500:       #a855f7;
        --navy-600:       #9333ea;
    }

    [data-color="pink"] {
        --mo-accent:      #ec4899;
        --mo-accent-glow: rgba(236,72,153,0.35);
        --mo-accent-rgb:  236, 72, 153;
        --mo-accent-dark: #be185d;
        --mo-accent-light:rgba(236,72,153,0.12);
        /* legacy */
        --primary:        #ec4899;
        --primary-rgb:    236, 72, 153;
        --navy-500:       #ec4899;
        --navy-600:       #db2777;
    }

    [data-color="rose"] {
        --mo-accent:      #f43f5e;
        --mo-accent-glow: rgba(244,63,94,0.35);
        --mo-accent-rgb:  244, 63, 94;
        --mo-accent-dark: #be123c;
        --mo-accent-light:rgba(244,63,94,0.12);
        /* legacy */
        --primary:        #f43f5e;
        --primary-rgb:    244, 63, 94;
        --navy-500:       #f43f5e;
        --navy-600:       #e11d48;
    }

    [data-color="teal"] {
        --mo-accent:      #14b8a6;
        --mo-accent-glow: rgba(20,184,166,0.35);
        --mo-accent-rgb:  20, 184, 166;
        --mo-accent-dark: #0f766e;
        --mo-accent-light:rgba(20,184,166,0.12);
        /* legacy */
        --primary:        #14b8a6;
        --primary-rgb:    20, 184, 166;
        --navy-500:       #14b8a6;
        --navy-600:       #0d9488;
    }

    [data-color="green"] {
        --mo-accent:      #22c55e;
        --mo-accent-glow: rgba(34,197,94,0.35);
        --mo-accent-rgb:  34, 197, 94;
        --mo-accent-dark: #15803d;
        --mo-accent-light:rgba(34,197,94,0.12);
        /* legacy */
        --primary:        #22c55e;
        --primary-rgb:    34, 197, 94;
        --navy-500:       #22c55e;
        --navy-600:       #16a34a;
    }

    [data-color="orange"] {
        --mo-accent:      #f59e0b;
        --mo-accent-glow: rgba(245,158,11,0.35);
        --mo-accent-rgb:  245, 158, 11;
        --mo-accent-dark: #b45309;
        --mo-accent-light:rgba(245,158,11,0.12);
        /* legacy */
        --primary:        #f59e0b;
        --primary-rgb:    245, 158, 11;
        --navy-500:       #f59e0b;
        --navy-600:       #d97706;
    }

}
/* ── End @layer accent ───────────────────────────────────────── */


/* ════════════════════════════════════════════════════
   LAYER: components
   کامپوننت‌های پایه که باید بین همه فایل‌ها مشترک باشند
   (فایل‌های دیگر می‌توانند این‌ها را در components خودشان override کنند)
   ════════════════════════════════════════════════════ */
@layer components {

    /* ── Reset پایه ──────────────────────────────────── */
    *, *::before, *::after {
        box-sizing: border-box;
    }

    /* ── RTL + فونت فارسی ────────────────────────────── */
    html {
        direction: rtl;
        font-family: var(--mo-font-main);
        -webkit-text-size-adjust: 100%;
        scroll-behavior: smooth;
    }

    body {
        margin: 0;
        font-family: var(--mo-font-main);
        background-color: var(--mo-bg-main);
        color: var(--mo-text-high);
        line-height: var(--mo-line-height-normal);
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    /* ── Button Reset ────────────────────────────────── */
    button {
        font-family: inherit;
        cursor: pointer;
        border: none;
        background: none;
        padding: 0;
    }

    /* ── Image Reset ─────────────────────────────────── */
    img {
        max-width: 100%;
        display: block;
    }

    /* ── Focus Visible (accessibility) ──────────────── */
    :focus-visible {
        outline: 2px solid var(--mo-accent);
        outline-offset: 2px;
    }

    /* ── Scrollbar (webkit) ──────────────────────────── */
    ::-webkit-scrollbar { width: 6px; height: 6px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb {
        background: var(--mo-border-strong);
        border-radius: var(--mo-radius-full);
    }
    ::-webkit-scrollbar-thumb:hover {
        background: var(--mo-text-low);
    }

    /* ── Selection ───────────────────────────────────── */
    ::selection {
        background-color: var(--mo-accent-light, rgba(59,130,246,0.25));
        color: var(--mo-text-high);
    }

    /* ── Screen Reader Only ──────────────────────────── */
    .sr-only {
        position: absolute;
        width: 1px; height: 1px;
        padding: 0; margin: -1px;
        overflow: hidden;
        clip: rect(0,0,0,0);
        white-space: nowrap;
        border-width: 0;
    }

}
/* ── End @layer components ───────────────────────────────────── */


/* ════════════════════════════════════════════════════
   LAYER: utilities
   جایگزین !important — این layer آخر است = بالاترین specificity
   هیچ فایل دیگری نباید !important استفاده کند؛
   در عوض class utility اضافه کن.
   ════════════════════════════════════════════════════ */
@layer utilities {

    /* ── Display ─────────────────────────────────────── */
    .u-hidden    { display: none; }
    .u-visible   { display: block; }
    .u-flex      { display: flex; }
    .u-flex-col  { display: flex; flex-direction: column; }
    .u-grid      { display: grid; }
    .u-sr-only   { position: absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }

    /* ── Spacing ─────────────────────────────────────── */
    .u-mt-auto   { margin-top: auto; }
    .u-mb-auto   { margin-bottom: auto; }
    .u-mx-auto   { margin-left: auto; margin-right: auto; }

    /* ── Text ─────────────────────────────────────────── */
    .u-text-high { color: var(--mo-text-high); }
    .u-text-mid  { color: var(--mo-text-mid); }
    .u-text-low  { color: var(--mo-text-low); }
    .u-text-accent { color: var(--mo-accent); }
    .u-text-rtl  { direction: rtl; text-align: right; }

    /* ── Background ───────────────────────────────────── */
    .u-bg-main    { background-color: var(--mo-bg-main); }
    .u-bg-surface { background-color: var(--mo-bg-surface); }
    .u-bg-card    { background-color: var(--mo-bg-card); }
    .u-bg-accent  { background-color: var(--mo-accent); }

    /* ── Border ───────────────────────────────────────── */
    .u-border     { border: 1px solid var(--mo-border); }
    .u-rounded-md { border-radius: var(--mo-radius-md); }
    .u-rounded-lg { border-radius: var(--mo-radius-lg); }

    /* ── Transitions ──────────────────────────────────── */
    .u-transition { transition: all var(--mo-transition-base); }

    /* ── Override helpers (جایگزین !important در overrides-v1_3.css) ── */
    .u-bg-main-force    { background-color: var(--mo-bg-main)     !important; }
    .u-text-high-force  { color: var(--mo-text-high)              !important; }
    .u-accent-force     { color: var(--mo-accent)                  !important; }
    .u-border-force     { border-color: var(--mo-border)          !important; }

}
/* ── End @layer utilities ────────────────────────────────────── */

/*
 * ══════════════════════════════════════════════════════════════
 * Migration Guide (برای حذف !important از overrides-v1_3.css)
 * ══════════════════════════════════════════════════════════════
 *
 * قبل (overrides-v1_3.css):
 *   .some-class { color: #fff !important; }
 *
 * بعد — گزینه ۱: class utility
 *   HTML: <div class="some-class u-text-high">
 *
 * بعد — گزینه ۲: جابجا کردن به @layer utilities در همین فایل
 *   @layer utilities { .some-class { color: var(--mo-text-high); } }
 *
 * بعد — گزینه ۳: specificity بالاتر با selector
 *   :is([data-theme]) .some-class { color: var(--mo-text-high); }
 * ══════════════════════════════════════════════════════════════
 */