/* Light Theme */
:root[data-theme="light"] {
    --color-secondary: #EAF1FF;
    --color-secondary-alt: #0E1118;

    --color-support: #B6BED7;
    --color-support-alt: #4A4D56;

    --color-accent: #C1D4FA;
    --color-deep-sapphire-blue: #C1D4FA;

    --background-under-review-dark: #FFF4DE;
    --background-unavailable-dark: #FFD3B3;
    --background-approved-dark: #C8E3FF;
    --background-rejected-dark: #FFE2E5;

    --color-background-light: #000000;
    --color-white: #000000;
    --color-background-dark: #FFFFFF;
    --color-black: #FFFFFF;

    /* Light-mode scrims:
       - solid stays ice (page blends with --color-secondary)
       - translucent stops are soft white so photo overlays stay clean
         (ice-blue @ 50% was muddying heroes / cards) */
    --overlay-scrim-solid: #EAF1FF;
    --overlay-scrim-90: rgba(255, 255, 255, 0.92);
    --overlay-scrim-80: rgba(255, 255, 255, 0.86);
    --overlay-scrim-75: rgba(255, 255, 255, 0.72);
    --overlay-scrim-60: rgba(255, 255, 255, 0.55);
    --overlay-scrim-50: rgba(255, 255, 255, 0.36);
    --overlay-scrim-35: rgba(255, 255, 255, 0.26);
    --overlay-scrim-30: rgba(255, 255, 255, 0.20);
    --overlay-scrim-20: rgba(255, 255, 255, 0.12);
    --overlay-scrim-15: rgba(255, 255, 255, 0.08);
    --overlay-scrim-00: rgba(255, 255, 255, 0);

    /* Dim tokens stay dark in light mode (inherited from :root defaults) */
}

/* Smooth theme toggle only after first paint (avoids light-mode load fade). */
html[data-theme-ready="1"] body {
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Icon styling for light theme — same pattern as Studio */
[data-theme="light"] .icon--white svg path,
[data-theme="light"] .icon--white svg circle,
[data-theme="light"] .icon--white svg rect:not([fill="none"]) {
    fill: var(--color-secondary-alt);
}

[data-theme="light"] .icon--white img.about-artist__timeline-birthday,
[data-theme="light"] .icon--white img.about-artist__timeline-logo,
[data-theme="light"] .company-timeline__icon.icon--white img {
    filter: brightness(0);
}

/* Fav icon: only the small overlay heart is red; big heart stays muted */
.navbar__icon--favourite svg > path,
.navbar__icon--favourite__sidebar svg > path {
    fill: #BB003E;
}

[data-theme="light"] .navbar__icon--favourite.icon--white svg > path,
[data-theme="light"] .navbar__icon--favourite__sidebar.icon--white svg > path {
    fill: #BB003E;
}

[data-theme="light"] .navbar__icon--favourite.icon--white svg > g path,
[data-theme="light"] .navbar__icon--favourite__sidebar.icon--white svg > g path {
    fill: #0E1118;
}

/* Artwork card hearts: keep ice heart; darken the pill so it reads on light mode */
[data-theme="light"] .fav-artwork__favorite {
    background: rgba(14, 17, 24, 0.72);
    box-shadow: 0 0 30px 0 rgba(14, 17, 24, 0.28);
}

[data-theme="light"] .fav-artwork__favorite .fav-artwork__icon,
[data-theme="light"] .fav-artwork__heart .fav-artwork__icon,
[data-theme="light"] button.fav-artwork__heart .fav-artwork__icon,
[data-theme="light"] .fav-artwork__favorite[data-favorited="false"] .fav-artwork__icon,
[data-theme="light"] .fav-artwork__heart[data-favorited="false"] .fav-artwork__icon,
[data-theme="light"] button.fav-artwork__heart[data-favorited="false"] .fav-artwork__icon {
    fill: #EAF1FF;
    stroke: transparent;
}

[data-theme="light"] .fav-artwork__favorite input:checked + .fav-artwork__heart svg,
[data-theme="light"] .fav-artwork__favorite input:checked + .fav-artwork__heart .fav-artwork__icon,
[data-theme="light"] .fav-artwork__favorite[data-favorited="true"] .fav-artwork__icon,
[data-theme="light"] .fav-artwork__heart[data-favorited="true"] .fav-artwork__icon,
[data-theme="light"] button.fav-artwork__heart[data-favorited="true"] .fav-artwork__icon {
    fill: #BB003E;
    stroke: #BB003E;
}

/*
 * Touch / mobile: always show artwork hover tops (artist + fav) everywhere.
 * !important beats page CSS that sets opacity:0 until :hover.
 */
@media (max-width: 950px), (hover: none) {
    .discover-view__hover--container,
    .artist-artworks__hover--container,
    .latest-artworks__hover--container {
        opacity: 1 !important;
        transform: none !important;
        pointer-events: auto !important;
    }

    .discover-view__hover--container-bottom,
    .artist-artworks__hover--container-bottom,
    .latest-artworks__hover--container-bottom {
        display: none !important;
    }

    /* Follow CTA: expanded + label visible (no hover on touch) */
    .artist-card__btn.artist-card__btn--follow.artist-action-btn {
        flex: 0.7;
        background: var(--color-primary);
        color: var(--color-secondary-alt);
    }

    .artist-card__btn.artist-card__btn--follow.artist-action-btn .icon-normal {
        transform: scale(1.1) rotate(90deg);
    }

    .artist-card__btn.artist-card__btn--follow.artist-action-btn .icon-normal path {
        fill: var(--color-secondary-alt);
    }

    .artist-card__btn.artist-card__btn--follow.artist-action-btn span,
    .artist-card__btn.artist-card__btn--follow.artist-action-btn .artist-action-text--default {
        max-width: -webkit-fill-available;
        opacity: 1;
        flex: 1;
    }

    .artist-action-input:checked + .artist-card__btn--follow.artist-action-btn .artist-action-text--active {
        max-width: -webkit-fill-available;
        opacity: 1;
        flex: 1;
    }
}