/* Farebná hierarchia verejného webu. Svetlá téma zostáva v pôvodných komponentoch. */
html.dark-mode {
    --rv-depth-blue: #38bdf8;
    --rv-depth-mint: #0d9488;
    --rv-depth-green: #10b981;
    --rv-depth-violet: #8b5cf6;
    --rv-depth-gold: var(--primary-color);
    --rv-depth-copy: color-mix(in srgb, var(--text-secondary) 60%, var(--text-primary));
    --rv-depth-gold-text: color-mix(in srgb, var(--primary-color) 45%, var(--text-primary));
}
html.dark-mode :is(.pf-hero-card, .pf-final-box, .am-hero-card, .am-reward, .p-card.featured) {
    --rv-depth-accent: var(--rv-depth-gold);
}
html.dark-mode :is(.cz-hero-card, .cz-final-box, .pf-segment-panel, .cz-service-panel, .pm-panel, .am-type) {
    --rv-depth-accent: var(--rv-depth-mint);
}
html.dark-mode :is(.st-hero, .df-card, .app-card, .app-choice) {
    --rv-depth-accent: var(--rv-depth-blue);
}
html.dark-mode :is(.affiliate-hero-card, .st-privacy) {
    --rv-depth-accent: var(--rv-depth-green);
}
html.dark-mode .v8-city .v8-hero {
    --rv-depth-accent: var(--city-accent, var(--rv-depth-gold));
}
html.dark-mode :is(.st-hero, .v8-city .v8-hero) {
    --rv-depth-copy: color-mix(in srgb, var(--text-secondary) 50%, var(--text-primary));
}
html.dark-mode :is(.pf-hero-card, .cz-hero-card, .st-hero, .am-hero-card, .affiliate-hero-card,
    .pf-final-box, .cz-final-box, .v8-city .v8-hero) {
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--card-bg) 68%, var(--rv-depth-accent)),
        color-mix(in srgb, var(--bg-color) 93%, var(--rv-depth-accent)));
    border-color: color-mix(in srgb, var(--border-color) 55%, var(--rv-depth-accent));
    color: var(--text-primary);
}
html.dark-mode :is(.pf-hero, .cz-hero, .am-hero, .affiliate-hero) h1 {
    color: var(--text-primary);
}
html.dark-mode :is(.pf-hero-copy, .cz-hero-copy, .am-hero-copy, .affiliate-hero-copy, .v8-city .v8-copy) > p,
html.dark-mode :is(.pf-points, .cz-note, .am-points, .affiliate-points, .pf-final p, .cz-final p, .st-copy p) {
    color: var(--rv-depth-copy);
}
html.dark-mode :is(.pf-hero .pf-kicker, .cz-hero .cz-kicker, .am-hero .am-kicker, .affiliate-kicker,
    .v8-city .v8-kicker, .st-kicker) {
    color: var(--rv-depth-gold-text);
}
html.dark-mode :is(.am-logo, .affiliate-hero-logo) {
    filter: invert(1) hue-rotate(180deg);
}
html.dark-mode :is(.pf-hero .pf-btn-dark, .cz-hero .cz-btn-dark, .am-hero .am-btn-dark,
    .affiliate-hero .btn-primary, .v8-city .v8-hero .v8-primary, .st-hero .st-btn:not(.alt)) {
    color: var(--text-primary);
    background: var(--primary-hover);
    border-color: var(--primary-color);
}
html.dark-mode :is(.pf-proof, .cz-proof, .am-trust) {
    background: var(--bg-color);
}
html.dark-mode :is(.pf-proof-icon, .cz-proof-icon) {
    color: var(--rv-depth-gold-text);
    background: color-mix(in srgb, var(--bg-color) 82%, var(--rv-depth-gold));
}
/* Jemné odlíšenie menších kariet; ikonové akcenty sledujú ich obsah. */
html.dark-mode :is(.pf-benefit, .cz-benefit, .am-benefit, .st-card, .pf-explore-card,
    .cz-discover-card, .am-type, .df-card, .app-card, .app-choice, .catalog-card, .p-card,
    .method-card, .persona-card, .rate-tile) {
    --rv-depth-accent: var(--rv-depth-gold);
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--card-bg) 90%, var(--rv-depth-accent)), var(--card-bg));
    border-color: color-mix(in srgb, var(--border-color) 78%, var(--rv-depth-accent));
    border-radius: var(--radius-card);
}
html.dark-mode :is(.pf-benefit, .cz-benefit, .am-benefit, .st-card, .pf-explore-card,
    .cz-discover-card, .am-type, .df-card, .app-card, .app-choice, .catalog-card, .p-card,
    .method-card, .persona-card, .rate-tile):nth-child(3n+2) {
    --rv-depth-accent: var(--rv-depth-mint);
}
html.dark-mode :is(.pf-benefit, .cz-benefit, .am-benefit, .st-card, .pf-explore-card,
    .cz-discover-card, .am-type, .df-card, .app-card, .app-choice, .catalog-card, .p-card,
    .method-card, .persona-card, .rate-tile):nth-child(3n+3) {
    --rv-depth-accent: var(--rv-depth-blue);
}
html.dark-mode :is(.pf-benefit, .cz-benefit, .am-benefit, .st-card, .df-card, .app-card, .catalog-card,
    .method-card, .persona-card) p {
    color: var(--rv-depth-copy);
}
html.dark-mode :is(.pf-benefit .pf-bi, .cz-benefit .cz-benefit-icon, .am-benefit .am-benefit-icon, .st-card > span,
    .df-card-icon, .pf-explore-icon, .persona-card .icon) {
    color: color-mix(in srgb, var(--rv-depth-accent, var(--rv-depth-gold)) 45%, var(--text-primary));
    background: color-mix(in srgb, var(--bg-color) 80%, var(--rv-depth-accent, var(--rv-depth-gold)));
    border-radius: var(--radius-control);
}
html.dark-mode :is(.pf-segment-panel, .cz-service-panel, .st-privacy, .am-reward) {
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--card-bg) 84%, var(--rv-depth-accent)), var(--bg-color));
    border-color: color-mix(in srgb, var(--border-color) 65%, var(--rv-depth-accent));
}
html.dark-mode .p-card.featured {
    --rv-depth-accent: var(--rv-depth-violet);
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--card-bg) 82%, var(--rv-depth-accent)), var(--bg-color));
    border-color: color-mix(in srgb, var(--border-color) 45%, var(--rv-depth-accent));
}
html.dark-mode .p-card:nth-child(1) { --rv-depth-accent: var(--rv-depth-green); }
html.dark-mode .p-card:nth-child(2) { --rv-depth-accent: var(--rv-depth-blue); }
html.dark-mode .p-card:nth-child(3) { --rv-depth-accent: var(--rv-depth-violet); }
html.dark-mode .p-card:nth-child(4) { --rv-depth-accent: var(--rv-depth-gold); }
html.dark-mode .p-card:nth-child(5) { --rv-depth-accent: var(--text-secondary); }
/* Staršie karty obsahujú inline farby; tieto úzke pravidlá opravujú iba tmavú tému. */
html.dark-mode .p-card h3,
html.dark-mode .p-card .p-features .material-symbols-outlined {
    color: color-mix(in srgb, var(--rv-depth-accent) 45%, var(--text-primary)) !important;
}
html.dark-mode .p-card .p-save {
    color: color-mix(in srgb, var(--rv-depth-green) 45%, var(--text-primary));
}
html.dark-mode .p-card .p-cta {
    background: color-mix(in srgb, var(--bg-color) 45%, var(--rv-depth-accent)) !important;
    color: var(--text-primary) !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px !important;
    line-height: 1;
}
html.dark-mode .p-card .p-cta .material-symbols-outlined {
    font-size: 20px !important;
    line-height: 1;
    flex-shrink: 0;
}
html.dark-mode .p-card.featured p {
    color: var(--rv-depth-copy);
}
html.dark-mode :is(.st-privacy p, .am-reward p) {
    color: var(--rv-depth-copy);
}
html.dark-mode :is(.st-card > span, .df-card-icon, .app-card h2 > .material-symbols-outlined) {
    color: color-mix(in srgb, var(--rv-depth-accent, var(--rv-depth-blue)) 45%, var(--text-primary));
}
/* Installation instructions share the dialog surface rather than another card. */
:is(.app-card, .app-notice, .app-installation-faq) a:not(.app-download),
:is(.app-card, .app-notice, .app-installation-faq) a:not(.app-download):visited {
    color: var(--primary-hover);
    text-decoration: underline;
    text-underline-offset: 3px;
}
:is(.app-card, .app-notice, .app-installation-faq) a:not(.app-download):hover,
:is(.app-card, .app-notice, .app-installation-faq) a:not(.app-download):focus-visible {
    color: var(--text-primary);
}
:is(.app-card, .app-notice, .app-installation-faq) a:not(.app-download):focus-visible {
    outline: 2px solid var(--primary-hover);
    outline-offset: 3px;
}

html.dark-mode :is(.app-card, .app-notice, .app-installation-faq) a:not(.app-download),
html.dark-mode :is(.app-card, .app-notice, .app-installation-faq) a:not(.app-download):visited {
    color: var(--rv-depth-gold-text);
    text-decoration: underline;
    text-underline-offset: 3px;
}
html.dark-mode :is(.app-card, .app-notice, .app-installation-faq) a:not(.app-download):hover,
html.dark-mode :is(.app-card, .app-notice, .app-installation-faq) a:not(.app-download):focus-visible {
    color: var(--text-primary);
}
html.dark-mode :is(.app-card, .app-notice, .app-installation-faq) a:not(.app-download):focus-visible {
    outline: 2px solid var(--rv-depth-gold-text);
    outline-offset: 3px;
}

html.dark-mode .app-info-body .app-card {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

html.dark-mode :is(.p-card, .app-choice, .pf-explore-card, .community-card-link):focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 4px;
}