/**
 * جسر الهوية: يعتمد على --theme-* و --theme-*-rgb من ThemeColorsViewComponent.
 * يُحمّل بعد site.css.
 */
:root {
    --app-brand-50: color-mix(in srgb, var(--theme-primary) 12%, white);
    --app-brand-100: color-mix(in srgb, var(--theme-primary) 20%, white);
    --app-brand-200: color-mix(in srgb, var(--theme-primary) 34%, white);
    --app-brand-300: color-mix(in srgb, var(--theme-primary) 48%, white);
    --app-brand-400: color-mix(in srgb, var(--theme-primary) 58%, #e2e8f0);
    --app-brand-500: color-mix(in srgb, var(--theme-primary) 72%, #94a3b8);
    --app-brand-600: var(--theme-primary);
    --app-brand-700: color-mix(in srgb, var(--theme-primary) 76%, #0f172a);
    --app-brand-800: color-mix(in srgb, var(--theme-primary) 62%, #0f172a);
    --app-brand-900: color-mix(in srgb, var(--theme-primary) 48%, #020617);
    --app-brand-950: color-mix(in srgb, var(--theme-primary) 68%, #020617);
    --app-sec-400: color-mix(in srgb, var(--theme-secondary) 42%, white);
    --app-sec-500: var(--theme-secondary);
    --app-sec-600: color-mix(in srgb, var(--theme-secondary) 78%, #0f172a);
    --app-sec-700: color-mix(in srgb, var(--theme-secondary) 55%, #0f172a);
}

/* ——— Tailwind brand utilities (مطابقة site.css) ——— */
.bg-brand-50 { background-color: var(--app-brand-50); }
.bg-brand-100 { background-color: var(--app-brand-100); }
.bg-brand-500 { background-color: var(--app-brand-500); }
.bg-brand-600 { background-color: var(--app-brand-600); }
.bg-brand-50\/30 { background-color: rgb(var(--theme-primary-rgb) / 0.3); }
.bg-brand-50\/40 { background-color: rgb(var(--theme-primary-rgb) / 0.4); }

.text-brand-400 { color: var(--app-brand-400); }
.text-brand-500 { color: var(--app-brand-500); }
.text-brand-600 { color: var(--app-brand-600); }
.text-brand-700 { color: var(--app-brand-700); }

.border-brand-400 { border-color: var(--app-brand-400); }
.border-brand-500 { border-color: var(--app-brand-500); }

.hover\:bg-brand-50:hover { background-color: var(--app-brand-50); }
.hover\:border-brand-200:hover { border-color: var(--app-brand-200); }
.hover\:border-brand-300:hover { border-color: var(--app-brand-300); }
.hover\:text-brand-700:hover { color: var(--app-brand-700); }

.dark\:bg-brand-900\/40:is(.dark *) { background-color: rgb(var(--theme-primary-rgb) / 0.4); }
.dark\:text-brand-300:is(.dark *) { color: var(--app-brand-300); }
.dark\:text-brand-400:is(.dark *) { color: var(--app-brand-400); }
.dark\:hover\:border-brand-700:hover:is(.dark *) { border-color: var(--app-brand-700); }

.dark\:to-brand-950\/20:is(.dark *) {
    --tw-gradient-to: rgb(var(--theme-primary-rgb) / 0.2) var(--tw-gradient-to-position);
}

.from-brand-50 {
    --tw-gradient-from: var(--app-brand-50) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(var(--theme-primary-rgb) / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-brand-600 {
    --tw-gradient-from: var(--app-brand-600) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(var(--theme-primary-rgb) / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.to-brand-700 {
    --tw-gradient-to: var(--app-brand-700) var(--tw-gradient-to-position);
}
.to-brand-50\/40 {
    --tw-gradient-to: rgb(var(--theme-primary-rgb) / 0.4) var(--tw-gradient-to-position);
}

.shadow-brand-600\/20 {
    --tw-shadow-color: rgb(var(--theme-primary-rgb) / 0.2);
    --tw-shadow: var(--tw-shadow-colored);
}

.ring-brand-200 {
    --tw-ring-opacity: 1;
    --tw-ring-color: var(--app-brand-200);
}

.ring-brand-500 {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(var(--theme-primary-rgb) / var(--tw-ring-opacity, 1));
}

.group:hover .group-hover\:text-brand-600 {
    color: var(--app-brand-600);
}

.has-\[\:checked\]\:border-brand-400:has(:checked) {
    border-color: var(--app-brand-400);
}
.has-\[\:checked\]\:bg-brand-50\/60:has(:checked) {
    background-color: rgb(var(--theme-primary-rgb) / 0.6);
}

/* مكوّنات الطبقة components */
body:not(.public-site) a {
    color: var(--app-brand-600);
}
body:not(.public-site) a:hover {
    color: var(--app-brand-700);
}

.btn-primary {
    background-color: var(--theme-primary);
    color: var(--theme-primary-contrast);
}
.btn-primary:hover {
    background-color: var(--app-brand-700);
}

.sidebar-link.active {
    background-color: var(--app-brand-50);
    color: var(--app-brand-700);
}

.bottom-nav-item.active {
    color: var(--app-brand-600);
}

.input:focus,
.select:focus,
.textarea:focus {
    border-color: var(--app-brand-500);
    --tw-ring-color: rgb(var(--theme-primary-rgb) / var(--tw-ring-opacity, 1));
}

.checkbox {
    color: var(--app-brand-600);
}
.checkbox:focus {
    --tw-ring-color: rgb(var(--theme-primary-rgb) / var(--tw-ring-opacity, 1));
}

.btn:focus,
.\!btn:focus {
    --tw-ring-color: rgb(var(--theme-primary-rgb) / var(--tw-ring-opacity, 1));
}

.spinner {
    border-color: rgb(var(--theme-primary-rgb) / 0.22);
    border-top-color: var(--theme-primary);
}

/* خلفية تسجيل الدخول */
.auth-bg {
    background-image:
        radial-gradient(at 0% 0%, rgb(var(--theme-primary-rgb) / 0.14) 0%, transparent 50%),
        radial-gradient(at 100% 100%, rgb(var(--theme-secondary-rgb) / 0.12) 0%, transparent 50%),
        linear-gradient(180deg, #f8fafc 0%, color-mix(in srgb, var(--theme-primary) 8%, #f8fafc) 100%);
}

/* ——— الموقع العام (.public-shell) ——— */
.public-shell {
    background-image: linear-gradient(
        to bottom,
        #f8fafc,
        white,
        color-mix(in srgb, var(--theme-primary) 6%, white)
    );
}

.public-shell a.public-link-inherit:hover {
    color: var(--app-brand-700);
}

.public-logo-mark {
    background-image: linear-gradient(
        to bottom right,
        color-mix(in srgb, var(--theme-secondary) 55%, white),
        var(--theme-secondary)
    );
    box-shadow: 0 10px 15px -3px rgb(var(--theme-secondary-rgb) / 0.25);
    --tw-ring-color: rgb(var(--theme-secondary-rgb) / 0.15);
}

.public-logo-mark.public-logo-mark--photo {
    background-image: none;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
}

.public-logo-mark-img {
    display: block;
    width: 2.25rem;
    height: 2.25rem;
    object-fit: contain;
}

.public-btn-primary {
    background-image: linear-gradient(
        to left,
        color-mix(in srgb, var(--theme-secondary) 35%, #fcd34d),
        var(--theme-secondary)
    );
    color: var(--theme-secondary-contrast);
    box-shadow: 0 10px 15px -3px rgb(var(--theme-secondary-rgb) / 0.28);
}
.public-btn-primary:hover {
    background-image: linear-gradient(
        to left,
        color-mix(in srgb, var(--theme-secondary) 22%, #fde68a),
        color-mix(in srgb, var(--theme-secondary) 88%, white)
    );
}

.public-btn-nav {
    background-color: var(--theme-primary);
    color: var(--theme-primary-contrast);
    box-shadow: 0 4px 6px -1px rgb(var(--theme-primary-rgb) / 0.22);
}
.public-btn-nav:hover {
    background-color: color-mix(in srgb, var(--theme-primary) 88%, white);
}

.public-hero {
    background-image: linear-gradient(
        to bottom right,
        white,
        color-mix(in srgb, var(--theme-primary) 10%, white),
        white
    );
}

.public-hero::before {
    background-image:
        radial-gradient(ellipse 90% 60% at 50% -30%, rgb(var(--theme-secondary-rgb) / 0.2), transparent),
        radial-gradient(ellipse 70% 50% at 100% 0%, rgb(var(--theme-primary-rgb) / 0.14), transparent),
        radial-gradient(ellipse 50% 40% at 0% 100%, rgb(52 211 153 / 0.08), transparent);
}

.public-hero-kicker {
    color: var(--app-brand-700);
}

.public-hero-accent {
    background-image: linear-gradient(
        to left,
        var(--app-sec-700),
        var(--theme-secondary),
        var(--app-sec-600)
    );
}

.public-card {
    border-top-color: var(--theme-primary);
}

.public-card-icon.indigo {
    background-color: color-mix(in srgb, var(--theme-primary) 18%, white);
    color: var(--app-brand-700);
    --tw-ring-color: rgb(var(--theme-primary-rgb) / 0.2);
}

.public-cta-band {
    border-color: color-mix(in srgb, var(--theme-primary) 35%, transparent);
    background-image: linear-gradient(
        to bottom right,
        color-mix(in srgb, var(--theme-primary) 88%, #0f172a),
        color-mix(in srgb, var(--theme-primary) 72%, #020617),
        color-mix(in srgb, var(--theme-primary) 58%, #020617)
    );
    box-shadow: 0 20px 25px -5px rgb(var(--theme-primary-rgb) / 0.22);
}

.public-cta-text {
    color: color-mix(in srgb, white 92%, var(--theme-primary));
}

.public-cta-btn {
    color: var(--app-brand-900);
}
.public-cta-btn:hover {
    background-color: color-mix(in srgb, var(--theme-primary) 12%, white);
}

.public-link-footer {
    color: var(--app-brand-700);
}
.public-link-footer:hover {
    color: var(--app-brand-800);
}