/*
 * Skórka Homer „numerologia” — kolory marki z kokpitu: fiolet #6d3fe0, granat nocy #17152e, złoto #e6c36a.
 * Włączana globalnie w Admin Customizer (App\Services\ThemeSettings, atrybut <html data-skin="numerologia">).
 * Ten sam zestaw zmiennych co skórki w resources/scss/config/_skins.scss; dodatkowo kolor linków
 * (wbudowane skórki zostawiają linki zielone) i pasek .color-line w barwach marki.
 * Zwykły plik CSS — zmiana nie wymaga przebudowy Vite.
 */

html[data-skin="numerologia"] {
    --ins-chart-primary: #6d3fe0;
    --ins-chart-primary-rgb: 109, 63, 224;
    --ins-chart-secondary: #b49cff;
    --ins-chart-secondary-rgb: 180, 156, 255;
    --ins-chart-gray: #e9e7f1;
    --ins-chart-gray-rgb: 233, 231, 241;
    --ins-chart-dark: #4b2aa6;
    --ins-chart-dark-rgb: 75, 42, 166;
    --ins-chart-border-color: #efecf8;
    --ins-chart-title-color: #bcb6d6;

    --ins-primary: #6d3fe0;
    --ins-primary-rgb: 109, 63, 224;
    --ins-primary-bg-subtle: rgba(109, 63, 224, .15);
    --ins-primary-border-subtle: rgba(109, 63, 224, .3);
    --ins-primary-text-emphasis: #522fa8;

    --ins-link-color: #6d3fe0;
    --ins-link-color-rgb: 109, 63, 224;
    --ins-link-hover-color: #522fa8;
    --ins-link-hover-color-rgb: 82, 47, 168;
}

/* Boczne menu — granat nocy jak „niebo dnia” w kokpicie */
html[data-skin="numerologia"][data-sidenav-color="dark"] {
    --ins-sidenav-bg: #17152e;
    --ins-sidenav-border-color: #17152e;
    --ins-sidenav-item-color: #8f8bab;
    --ins-sidenav-item-hover-color: #ece8ff;
    --ins-sidenav-item-hover-bg: #221f3f;
    --ins-sidenav-item-active-color: #ffffff;
    --ins-sidenav-item-active-bg: #241f47;
}
html[data-skin="numerologia"][data-sidenav-color="light"] {
    --ins-sidenav-item-hover-color: #6d3fe0;
    --ins-sidenav-item-active-color: #6d3fe0;
}
html[data-skin="numerologia"][data-sidenav-color="gray"] {
    --ins-sidenav-item-hover-color: #6d3fe0;
    --ins-sidenav-item-hover-bg: #efeafd;
}

/* Górny pasek */
html[data-skin="numerologia"][data-topbar-color="dark"] {
    --ins-topbar-bg: #17152e;
    --ins-topbar-item-color: #d9d4f2;
    --ins-topbar-item-hover-color: #ffffff;
    --ins-topbar-search-bg: #221f3f;
    --ins-topbar-search-border: #221f3f;
}
html[data-skin="numerologia"][data-topbar-color="light"],
html[data-skin="numerologia"][data-topbar-color="gray"] {
    --ins-topbar-item-hover-color: #6d3fe0;
}

/* Tryb ciemny: jaśniejszy fiolet dla linków, przyciski nadal czytelne z białym tekstem */
html[data-skin="numerologia"][data-bs-theme="dark"] {
    --ins-primary: #7c5cf0;
    --ins-primary-rgb: 124, 92, 240;
    --ins-primary-bg-subtle: rgba(124, 92, 240, .18);
    --ins-primary-border-subtle: rgba(124, 92, 240, .35);
    --ins-primary-text-emphasis: #9d84f5;

    --ins-link-color: #b49cff;
    --ins-link-color-rgb: 180, 156, 255;
    --ins-link-hover-color: #d4c6ff;
    --ins-link-hover-color-rgb: 212, 198, 255;

    --ins-chart-gray: #3a3850;
    --ins-chart-gray-rgb: 58, 56, 80;
    --ins-chart-border-color: #26243a;
}
html[data-skin="numerologia"][data-bs-theme="dark"][data-sidenav-color="dark"],
html[data-skin="numerologia"][data-bs-theme="dark"][data-sidenav-color="gray"],
html[data-skin="numerologia"][data-bs-theme="dark"][data-sidenav-color="light"] {
    --ins-sidenav-bg: #141226;
    --ins-sidenav-border-color: #221f3a;
    --ins-sidenav-item-color: #8f8bab;
    --ins-sidenav-item-hover-color: #ece8ff;
    --ins-sidenav-item-hover-bg: #201d38;
    --ins-sidenav-item-active-color: #ffffff;
    --ins-sidenav-item-active-bg: #221e40;
}
html[data-skin="numerologia"][data-bs-theme="dark"][data-topbar-color="dark"],
html[data-skin="numerologia"][data-bs-theme="dark"][data-topbar-color="light"],
html[data-skin="numerologia"][data-bs-theme="dark"][data-topbar-color="gray"] {
    --ins-topbar-bg: #141226;
    --ins-topbar-item-color: #c9c4e6;
    --ins-topbar-item-hover-color: #ffffff;
    --ins-topbar-search-bg: #201d38;
    --ins-topbar-search-border: #201d38;
}

/* Pasek na samej górze: zamiast tęczy Homera — fiolet przechodzący w złoto */
html[data-skin="numerologia"] .color-line {
    background-image: linear-gradient(to right, #6d3fe0, #9b59b6 45%, #d6457f 75%, #e6c36a);
}