/* ============================================================================
   coach-theme.css — رنگ و کاورِ انتخابیِ مربی

   این شیت را **دو جا** بار می‌کنند: صفحهٔ عمومیِ مربی، و نمونه‌کاورهای
   پنلِ «ظاهر» در «پروفایلِ من». اگر این‌جا نبود، هر کدام گرادیانِ خودش را
   می‌داشت و کاوری که مربی در ویرایشگر انتخاب می‌کرد با آنچه شاگرد می‌دید
   یکی نبود.

   قاعده: هر عنصری که کلاسِ `cp-theme` بگیرد و `--cp-light` / `--cp-dark`
   داشته باشد، `--cp` و پرده‌هایش را برای فرزندانش می‌سازد.

   ── چرا دو رنگ ────────────────────────────────────────────────────────────
   یک آبیِ تیره که روی کاغذِ سفید خوانا است، روی زمینهٔ تیرهٔ دارک‌مود
   تقریباً ناپیدا می‌شود. قالب هر دو را می‌دهد و این‌جا یکی انتخاب می‌شود.

   قاعدهٔ `:root:not([data-theme="light"])` همان چیزی است که tokens.css
   دارد: کاربری که صریحاً تمِ روشن را انتخاب کرده، نباید با
   `prefers-color-scheme: dark` سیستم تیره شود.
   ============================================================================ */

.cp-theme {
    --cp: var(--cp-light, var(--myo-brand));
    /* پرده‌های رقیقِ همان رنگ. `color-mix` یعنی هشت رنگِ پالت هشت مقدارِ
       دست‌ساز لازم ندارند. */
    --cp-soft: color-mix(in srgb, var(--cp) 10%, var(--myo-paper));
    --cp-soft-2: color-mix(in srgb, var(--cp) 18%, var(--myo-paper));
    --cp-line: color-mix(in srgb, var(--cp) 32%, var(--myo-line));
    --cp-ink: color-mix(in srgb, var(--cp) 80%, var(--myo-ink));
    --cp-ring: color-mix(in srgb, var(--cp) 30%, transparent);
    --cp-r: var(--myo-r-lg);

    /* ── رنگِ متن روی پُرِ رنگِ مربی ────────────────────────────────────
       این را نمی‌شود `#fff` گذاشت و رد شد. ده رنگِ تمِ روشن همه تیره‌اند
       (`#0077cc` تا `#455565`) و سفید رویشان می‌نشیند؛ ولی ده رنگِ تمِ
       تیره عمداً *روشن*اند تا روی زمینهٔ تیره دیده شوند — «زیتونی» در
       تمِ تیره `#a8c93a` است و برچسبِ سفید روی آن ناخوانا. پس رنگِ متن
       با تم عوض می‌شود، نه با رنگِ انتخابیِ مربی.
       `--cp-hover` هم به همین دلیل: تیره‌تر کردنِ دکمه در تمِ تیره
       کنتراست را خراب می‌کند، آن‌جا باید روشن‌تر شود. */
    --cp-on: #fff;
    --cp-hover: color-mix(in srgb, var(--cp) 84%, black);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .cp-theme {
    --cp: var(--cp-dark, var(--myo-brand));
    --cp-on: color-mix(in srgb, var(--cp) 14%, #070a0d);
    --cp-hover: color-mix(in srgb, var(--cp) 84%, white);
    }
}
:root[data-theme="dark"] .cp-theme {
    --cp: var(--cp-dark, var(--myo-brand));
    --cp-on: color-mix(in srgb, var(--cp) 14%, #070a0d);
    --cp-hover: color-mix(in srgb, var(--cp) 84%, white);
}

/* گوشهٔ تیز: مربی گفته صفحه‌اش جدی‌تر باشد. فقط شعاع عوض می‌شود، نه چیدمان. */
.cp-theme[data-corners="sharp"] { --cp-r: 3px; }
.cp-theme[data-corners="sharp"] .sx-card,
.cp-theme[data-corners="sharp"] .cp-svc,
.cp-theme[data-corners="sharp"] .cp-hl,
.cp-theme[data-corners="sharp"] .cp-shot { border-radius: 4px; }

/* ── کاور ─────────────────────────────────────────────────────────────────
   شش جنس، همه از `--cp` ساخته می‌شوند تا کاور و دکمه‌ها یک خانواده بمانند.
   هیچ‌کدام تصویر نیستند (جز `photo`): یک گرادیانِ CSS نه بار می‌آورد، نه
   در دارک‌مود غلط می‌شود. */
.cp-cover {
    height: 190px;
    background-size: cover;
    background-position: center;
    background-color: var(--cp-soft);
}

.cp-theme[data-cover="aurora"] .cp-cover {
    background-image:
        radial-gradient(60% 120% at 88% -10%, color-mix(in srgb, var(--cp) 55%, transparent), transparent 70%),
        radial-gradient(50% 110% at 12% 10%, color-mix(in srgb, var(--cp) 28%, transparent), transparent 70%),
        linear-gradient(160deg, var(--cp-soft-2), var(--myo-surface));
}

.cp-theme[data-cover="mesh"] .cp-cover {
    background-image:
        radial-gradient(38% 70% at 15% 15%, color-mix(in srgb, var(--cp) 60%, transparent), transparent 65%),
        radial-gradient(34% 64% at 78% 8%, color-mix(in srgb, var(--myo-accent-500) 40%, transparent), transparent 64%),
        radial-gradient(40% 80% at 55% 100%, color-mix(in srgb, var(--cp) 34%, transparent), transparent 66%),
        linear-gradient(120deg, var(--myo-surface), var(--cp-soft));
}

.cp-theme[data-cover="grid"] .cp-cover {
    background-image:
        linear-gradient(color-mix(in srgb, var(--cp) 20%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in srgb, var(--cp) 20%, transparent) 1px, transparent 1px),
        linear-gradient(150deg, var(--cp-soft-2), var(--myo-surface));
    background-size: 28px 28px, 28px 28px, cover;
}

.cp-theme[data-cover="rays"] .cp-cover {
    background-image:
        repeating-linear-gradient(115deg,
            color-mix(in srgb, var(--cp) 22%, transparent) 0 14px,
            transparent 14px 34px),
        linear-gradient(160deg, var(--cp-soft-2), var(--myo-surface));
}

.cp-theme[data-cover="solid"] .cp-cover {
    background-image: linear-gradient(180deg, color-mix(in srgb, var(--cp) 88%, black), var(--cp));
}

/* کاورِ عکسی: یک پردهٔ تیره تا متنِ سفیدِ روی آن در هر عکسی خوانا بماند. */
.cp-theme[data-cover="photo"] .cp-cover {
    position: relative;
}
.cp-theme[data-cover="photo"] .cp-cover::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, .12), rgba(0, 0, 0, .42));
}