/* ================================================================
   PALETTE — تنها منبع رنگ‌های پنل
   ورودی: فقط --primary-color (از تنظیمات سایت تزریق می‌شه)
   بقیه همه از روی همون ساخته می‌شن.
   ================================================================ */

:root {
    /* ---------- ۱. ورودی (پیش‌فرض، بعداً از تنظیمات override می‌شه) ---------- */
    --primary-color: #ffa614;

    /* ---------- ۲. خنثی‌ها (ثابت، مستقل از رنگ اصلی) ---------- */
    --clr-text: #2b3445; /* متن اصلی */
    --clr-text-soft: #3c4858; /* متن منو و عناوین فرعی */
    --clr-muted: #667085; /* متن کم‌اهمیت */
    --clr-border: #e3e7ee; /* خط و حاشیه خنثی */
    --clr-surface: #ffffff; /* کارت و پس‌زمینه‌ی اصلی */
    --clr-bg: #f6f7fb; /* پس‌زمینه‌ی صفحه */

    /* ---------- ۳. وضعیت‌ها (ثابت، معنای ثابت دارن) ---------- */
    --clr-success: #28a745;
    --clr-success-soft: rgba(40, 167, 69, 0.1);
    --clr-success-text: #1e7e34;

    --clr-danger: #dc3545;
    --clr-danger-soft: rgba(220, 53, 69, 0.1);
    --clr-danger-text: #e9031a;

    --clr-warning: #ffc107;
    --clr-warning-soft: rgba(255, 193, 7, 0.14);
    --clr-warning-text: #8a6500;

    --clr-info: #00b9ff;
    --clr-info-soft: rgba(0, 185, 255, 0.1);
    --clr-info-text: #00709e;

    /* ---------- ۴. مشتق‌ها از رنگ اصلی (fallback برای مرورگر قدیمی) ---------- */
    --clr-primary: var(--primary-color); /* پر شدن دکمه و المان‌های اصلی */
    --clr-primary-dark: var(--primary-color); /* گرادیان و هاور پررنگ */
    --clr-primary-text: var(--primary-color); /* متن رنگی روی بک‌گراند روشن */
    --clr-tint: #f8f8f8; /* بک‌گراند خیلی کم‌رنگ */
    --clr-tint-strong: #f0f0f0; /* بک‌گراند کم‌رنگ فعال */
    --clr-ring: rgba(0, 0, 0, 0.06); /* حاشیه نازک رنگی */
    --clr-ring-strong: rgba(0, 0, 0, 0.12); /* حاشیه نازک رنگی پررنگ‌تر */
    --clr-secondary: #f0f0f0; /* رنگ کمکی */

    --clr-hero-1: #2a2010; /* فال‌بک نهایی: تیره‌ی هم‌رنگ با primary */
    --clr-hero-2: #16110a;

    /* رنگ متن روی سطح رنگی (پیش‌فرض تیره) */
    --clr-on-primary: #2b3445;
    --clr-on-hero: #ffffff; /* هیرو همیشه تیره‌ست، پس متن پیش‌فرض سفید */
}

/* ---------- ۵. مشتق‌های داینامیک (مرورگرهای مدرن) ---------- */
@supports (color: color-mix(in srgb, red 10%, blue)) {
    :root {
        /* تیره‌سازی کمتر: 88% به جای 78% */
        --clr-primary-dark: color-mix(in srgb, var(--primary-color) 88%, #000);

        /* متن رنگی: 90% primary (روشن‌تر و شفاف‌تر) */
        --clr-primary-text: color-mix(
            in srgb,
            var(--primary-color) 90%,
            #1a1f2b
        );

        /* tint ملایم‌تر: 6% و 12% */
        --clr-tint: color-mix(in srgb, var(--primary-color) 6%, #fff);
        --clr-tint-strong: color-mix(in srgb, var(--primary-color) 12%, #fff);

        /* ring نازک‌تر: 15% و 28% */
        --clr-ring: color-mix(in srgb, var(--primary-color) 15%, transparent);
        --clr-ring-strong: color-mix(
            in srgb,
            var(--primary-color) 28%,
            transparent
        );

        /* secondary روشن‌تر: 22% */
        --clr-secondary: color-mix(in srgb, var(--primary-color) 22%, #fff);

        /* هیرو: درصد primary رو بالاتر بردیم تا رنگ اصلی واضح‌تر دیده بشه،
           ولی همچنان با یک سرمه‌ای تیره ترکیب می‌کنیم (نه سفید) تا روشن و
           چشم‌زننده نشه — چه primary زرد باشه چه آبی چه سبز. */
        --clr-hero-1: color-mix(in srgb, var(--primary-color) 42%, #1b2430);
        --clr-hero-2: color-mix(in srgb, var(--primary-color) 26%, #10151c);
    }
}

/* ---------- ۵.۱. بهترین حالت: OKLCH نسبی ----------
   فقط hue رنگ primary رو می‌گیریم؛ روشنایی رو خودمون کنترل می‌کنیم ولی
   chroma (اشباع رنگ) رو بالاتر بردیم تا primary واضح‌تر دیده بشه. */
@supports (color: oklch(from red 30% c h)) {
    :root {
        --clr-hero-1: oklch(from var(--primary-color) 34% 0.095 h);
        --clr-hero-2: oklch(from var(--primary-color) 19% 0.07 h);
    }
}

/* ---------- ۶. متن خودکار روی سطح رنگی ---------- */
@supports (color: oklch(from red l c h)) {
    :root {
        --clr-on-primary: oklch(
            from var(--clr-primary) clamp(0.27, calc((l - 0.72) * -1000), 1) 0 0
        );
        /* --clr-on-hero دیگه لازم نیست محاسبه بشه، چون هیرو همیشه تیره‌ست و بالا مقدار #fff ثابت گرفته */
    }
}

/* fallback قدیمی: اگه JS کلاس theme-dark رو اضافه کرد */
html.theme-dark {
    --clr-on-primary: #ffffff;
    --clr-on-hero: #ffffff;
}

/* ---------- ۷. alias های قدیمی (تا هیچ‌چیز نشکنه) ---------- */
:root {
    --light-primary: var(--clr-tint);
    --dark-primary: var(--clr-primary-dark);
    --secondary-color: var(--clr-secondary);
    --primary-transparentcolor: var(--clr-tint-strong);
    --primary-bg-color: var(--primary-color);
    --text-color-black: var(--clr-muted);

    /* بوت‌استرپ */
    --primary: var(--primary-color);
    --secondary: var(--clr-secondary);
    --success: var(--clr-success);
    --info: var(--clr-info);
    --warning: var(--clr-warning);
    --danger: var(--clr-danger);
    --light: var(--clr-tint);
    --dark: var(--clr-text-soft);
    --blue: var(--primary-color);
    --indigo: var(--primary-color);
    --purple: var(--clr-primary-dark);
    --orange: var(--primary-color);
    --gray: var(--clr-muted);
    --gray-dark: var(--clr-text-soft);
}