/*
 * Súbor: css/palettes/homepage.css
 * Obsah: Vlastná farebná téma homepage: premenné farieb, svetlé pozadie cenovej ponuky a tematické varianty tlačidiel, kariet, hero a pomocných tried.
 * Použitie: index.html.
 * Zapojenie: <link rel="stylesheet" href="css/palettes/homepage.css">; zachovaj pozíciu v hlavičke podľa css/README.md.
 * Závislosti: iba html[data-palette="homepage"]; vlastné --palette-* a nadväzujúce tematické premenné.
 * Nezávislosť: bez importu inej palety. Každá stránka načítava iba svoju paletu.
 */
html[data-palette="homepage"] {
      --palette-light: #E8E0D4;
      --palette-light-alt: color-mix(in srgb, #E8E0D4 78%, #D3C8B8);
      --palette-dark: #243142;
      --palette-sand: #D3C8B8;
      --palette-taupe: #D3C8B8;
      --palette-extra-accent: #E08A2E;
      --palette-extra-bg: #E8E0D4;
      --palette-extra-border: #D3C8B8;
      --palette-extra-text: #243142;
      --palette-extra-hover: #D3C8B8;
      --palette-light-rgb: 232 224 212;
      --palette-dark-rgb: 36 49 66;
      --palette-sand-rgb: 211 200 184;

      --bg: var(--palette-light);
      --bg-alt: var(--palette-light-alt);
      --surface: color-mix(in srgb, var(--palette-light) 45%, white);
      --text: var(--palette-dark);
      --muted: color-mix(in srgb, var(--palette-dark) 82%, var(--palette-sand));
      --border: var(--palette-sand);
      --border-strong: var(--palette-taupe);
      --accent: #E08A2E;
      --accent-hover: color-mix(in srgb, #E08A2E 85%, #243142);
      --accent-soft: color-mix(in srgb, #E08A2E 12%, var(--palette-light));
      --footer: #4B4A46;
      --footer-text: #F3EEE7;
      --footer-muted: #D5C1A0;
      --error: #E08A2E;
      --success: #243142;
    }

    :where(html[data-palette="homepage"]),
    :where(html[data-palette="homepage"]) body {
      background-color: var(--palette-light);
      color: var(--palette-dark);
    }

    :where(html[data-palette="homepage"]) #cena {
      background: var(--surface);
    }

    :where(html[data-palette="homepage"]) .btn--primary,
    :where(html[data-palette="homepage"]) .scope-choice[aria-pressed="true"] {
      background: var(--accent);
      border-color: var(--palette-taupe);
      color: var(--palette-dark);
    }

    :where(html[data-palette="homepage"]) .btn--primary:hover {
      background: var(--accent-hover);
      border-color: var(--palette-taupe);
    }

    :where(html[data-palette="homepage"]) .scope-choice[aria-pressed="true"]::after {
      color: var(--palette-dark);
    }

    :where(html[data-palette="homepage"]) .btn--secondary {
      background: var(--palette-light);
    }

    :where(html[data-palette="homepage"]) .btn:focus-visible,
    :where(html[data-palette="homepage"]) a:focus-visible,
    :where(html[data-palette="homepage"]) button:focus-visible,
    :where(html[data-palette="homepage"]) input:focus-visible,
    :where(html[data-palette="homepage"]) select:focus-visible,
    :where(html[data-palette="homepage"]) textarea:focus-visible {
      outline: 3px solid var(--palette-taupe);
      outline-offset: 3px;
    }

    :where(html[data-palette="homepage"]) .card,
    :where(html[data-palette="homepage"]) .trust-counter,
    :where(html[data-palette="homepage"]) .contact-form,
    :where(html[data-palette="homepage"]) .scope-aside {
      box-shadow: 0 5px 18px rgb(var(--palette-dark-rgb) / 4%);
    }

    :where(html[data-palette="homepage"]) .card {
      border-top: 3px solid var(--palette-sand);
    }

    :where(html[data-palette="homepage"]) .trust-counter {
      border-radius: 8px;
    }

    :where(html[data-palette="homepage"]) .site-header {
      background: var(--palette-light);
    }

    /* Preserve the hero photo and its responsive sizing defined by the page. */
    :where(html[data-palette="homepage"]) .hero {
      background-color: var(--palette-dark);
    }

    :where(html[data-palette="homepage"]) .hero::before {
      opacity: .55;
    }

    :where(html[data-palette="homepage"]) .bg-sky-500 {
      background-color: var(--palette-sand) !important;
    }

    :where(html[data-palette="homepage"]) .bg-sky-500 {
      color: var(--palette-dark) !important;
    }

    :where(html[data-palette="homepage"]) .bg-sky-500\/10 {
      background-color: rgb(var(--palette-sand-rgb) / 10%) !important;
    }

    :where(html[data-palette="homepage"]) .bg-sky-500\/20 {
      background-color: rgb(var(--palette-sand-rgb) / 20%) !important;
    }

    :where(html[data-palette="homepage"]) .bg-sky-500\/40 {
      background-color: rgb(var(--palette-sand-rgb) / 40%) !important;
    }

    :where(html[data-palette="homepage"]) .bg-sky-600 {
      background-color: var(--palette-sand) !important;
    }

    :where(html[data-palette="homepage"]) .bg-sky-600 {
      color: var(--palette-dark) !important;
    }

    :where(html[data-palette="homepage"]) .bg-slate-100 {
      background-color: var(--palette-light-alt) !important;
    }

    :where(html[data-palette="homepage"]) .bg-slate-200 {
      background-color: var(--palette-sand) !important;
    }

    :where(html[data-palette="homepage"]) .bg-slate-50 {
      background-color: var(--palette-light) !important;
    }

    :where(html[data-palette="homepage"]) .bg-slate-800 {
      background-color: var(--palette-dark) !important;
    }

    :where(html[data-palette="homepage"]) .bg-slate-900 {
      background-color: var(--palette-dark) !important;
    }

    :where(html[data-palette="homepage"]) .bg-slate-900\/10 {
      background-color: rgb(var(--palette-dark-rgb) / 10%) !important;
    }

    :where(html[data-palette="homepage"]) .bg-slate-900\/90 {
      background-color: rgb(var(--palette-dark-rgb) / 90%) !important;
    }

    :where(html[data-palette="homepage"]) .bg-slate-950 {
      background-color: var(--palette-dark) !important;
    }

    :where(html[data-palette="homepage"]) .bg-slate-950\/45 {
      background-color: rgb(var(--palette-dark-rgb) / 45%) !important;
    }

    :where(html[data-palette="homepage"]) .bg-slate-950\/50 {
      background-color: rgb(var(--palette-dark-rgb) / 50%) !important;
    }

    :where(html[data-palette="homepage"]) .bg-slate-950\/55 {
      background-color: rgb(var(--palette-dark-rgb) / 55%) !important;
    }

    :where(html[data-palette="homepage"]) .bg-slate-950\/60 {
      background-color: rgb(var(--palette-dark-rgb) / 60%) !important;
    }

    :where(html[data-palette="homepage"]) .bg-white {
      background-color: var(--palette-light) !important;
    }

    :where(html[data-palette="homepage"]) .bg-white\/10 {
      background-color: rgb(var(--palette-light-rgb) / 10%) !important;
    }

    :where(html[data-palette="homepage"]) .bg-white\/15 {
      background-color: rgb(var(--palette-light-rgb) / 15%) !important;
    }

    :where(html[data-palette="homepage"]) .bg-white\/5 {
      background-color: rgb(var(--palette-light-rgb) / 5%) !important;
    }

    :where(html[data-palette="homepage"]) .bg-white\/70 {
      background-color: rgb(var(--palette-light-rgb) / 70%) !important;
    }

    :where(html[data-palette="homepage"]) .bg-white\/80 {
      background-color: rgb(var(--palette-light-rgb) / 80%) !important;
    }

    :where(html[data-palette="homepage"]) .bg-white\/90 {
      background-color: rgb(var(--palette-light-rgb) / 90%) !important;
    }

    :where(html[data-palette="homepage"]) .bg-white\/95 {
      background-color: rgb(var(--palette-light-rgb) / 95%) !important;
    }

    :where(html[data-palette="homepage"]) .border-sky-400 {
      border-color: var(--palette-sand) !important;
    }

    :where(html[data-palette="homepage"]) .border-sky-400\/30 {
      border-color: rgb(var(--palette-sand-rgb) / 30%) !important;
    }

    :where(html[data-palette="homepage"]) .border-slate-100 {
      border-color: var(--palette-light-alt) !important;
    }

    :where(html[data-palette="homepage"]) .border-slate-200 {
      border-color: var(--palette-sand) !important;
    }

    :where(html[data-palette="homepage"]) .border-slate-200\/70 {
      border-color: rgb(var(--palette-sand-rgb) / 70%) !important;
    }

    :where(html[data-palette="homepage"]) .border-white\/10 {
      border-color: rgb(var(--palette-light-rgb) / 10%) !important;
    }

    :where(html[data-palette="homepage"]) .border-white\/15 {
      border-color: rgb(var(--palette-light-rgb) / 15%) !important;
    }

    :where(html[data-palette="homepage"]) .border-white\/20 {
      border-color: rgb(var(--palette-light-rgb) / 20%) !important;
    }

    :where(html[data-palette="homepage"]) .border-white\/30 {
      border-color: rgb(var(--palette-light-rgb) / 30%) !important;
    }

    :where(html[data-palette="homepage"]) .border-white\/60 {
      border-color: rgb(var(--palette-light-rgb) / 60%) !important;
    }

    :where(html[data-palette="homepage"]) .focus\:border-sky-400:focus {
      border-color: var(--palette-sand) !important;
    }

    :where(html[data-palette="homepage"]) .from-sky-400\/40 {
      --tw-gradient-from: rgb(var(--palette-sand-rgb) / 40%) !important;
    }

    :where(html[data-palette="homepage"]) .group:hover .group-hover\:bg-slate-950\/55 {
      background-color: rgb(var(--palette-dark-rgb) / 55%) !important;
    }

    :where(html[data-palette="homepage"]) .hover\:bg-sky-400:hover {
      background-color: var(--palette-sand) !important;
    }

    :where(html[data-palette="homepage"]) .hover\:bg-sky-400:hover {
      color: var(--palette-dark) !important;
    }

    :where(html[data-palette="homepage"]) .hover\:bg-sky-500:hover {
      background-color: var(--palette-sand) !important;
    }

    :where(html[data-palette="homepage"]) .hover\:bg-sky-500:hover {
      color: var(--palette-dark) !important;
    }

    :where(html[data-palette="homepage"]) .hover\:bg-sky-500\/60:hover {
      background-color: rgb(var(--palette-sand-rgb) / 60%) !important;
    }

    :where(html[data-palette="homepage"]) .hover\:bg-slate-100:hover {
      background-color: var(--palette-light-alt) !important;
    }

    :where(html[data-palette="homepage"]) .hover\:bg-slate-800:hover {
      background-color: var(--palette-dark) !important;
    }

    :where(html[data-palette="homepage"]) .hover\:bg-white\/25:hover {
      background-color: rgb(var(--palette-light-rgb) / 25%) !important;
    }

    :where(html[data-palette="homepage"]) .hover\:text-sky-400:hover {
      color: var(--palette-sand) !important;
    }

    :where(html[data-palette="homepage"]) .hover\:text-sky-600:hover {
      color: var(--palette-dark) !important;
    }

    :where(html[data-palette="homepage"]) .hover\:text-sky-700:hover {
      color: var(--palette-dark) !important;
    }

    :where(html[data-palette="homepage"]) .hover\:text-white:hover {
      color: var(--palette-light) !important;
    }

    :where(html[data-palette="homepage"]) .text-sky-100 {
      color: var(--palette-sand) !important;
    }

    :where(html[data-palette="homepage"]) .text-sky-200 {
      color: var(--palette-sand) !important;
    }

    :where(html[data-palette="homepage"]) .text-sky-300 {
      color: var(--palette-sand) !important;
    }

    :where(html[data-palette="homepage"]) .text-sky-400 {
      color: var(--palette-sand) !important;
    }

    :where(html[data-palette="homepage"]) .text-sky-50\/90 {
      color: rgb(var(--palette-sand-rgb) / 90%) !important;
    }

    :where(html[data-palette="homepage"]) .text-sky-500 {
      color: var(--palette-dark) !important;
    }

    :where(html[data-palette="homepage"]) .text-sky-600 {
      color: var(--palette-dark) !important;
    }

    :where(html[data-palette="homepage"]) .text-sky-700 {
      color: var(--palette-dark) !important;
    }

    :where(html[data-palette="homepage"]) .text-slate-300 {
      color: var(--palette-sand) !important;
    }

    :where(html[data-palette="homepage"]) .text-slate-400 {
      color: var(--palette-sand) !important;
    }

    :where(html[data-palette="homepage"]) .text-slate-500 {
      color: var(--palette-dark) !important;
    }

    :where(html[data-palette="homepage"]) .text-slate-600 {
      color: var(--palette-dark) !important;
    }

    :where(html[data-palette="homepage"]) .text-slate-700 {
      color: var(--palette-dark) !important;
    }

    :where(html[data-palette="homepage"]) .text-slate-800 {
      color: var(--palette-dark) !important;
    }

    :where(html[data-palette="homepage"]) .text-slate-900 {
      color: var(--palette-dark) !important;
    }

    :where(html[data-palette="homepage"]) .text-white {
      color: var(--palette-light) !important;
    }

    :where(html[data-palette="homepage"]) .text-white\/60 {
      color: rgb(var(--palette-light-rgb) / 60%) !important;
    }

    :where(html[data-palette="homepage"]) .text-white\/65 {
      color: rgb(var(--palette-light-rgb) / 65%) !important;
    }

    :where(html[data-palette="homepage"]) .text-white\/70 {
      color: rgb(var(--palette-light-rgb) / 70%) !important;
    }

    :where(html[data-palette="homepage"]) .text-white\/75 {
      color: rgb(var(--palette-light-rgb) / 75%) !important;
    }

    :where(html[data-palette="homepage"]) .text-white\/80 {
      color: rgb(var(--palette-light-rgb) / 80%) !important;
    }

    :where(html[data-palette="homepage"]) .text-white\/85 {
      color: rgb(var(--palette-light-rgb) / 85%) !important;
    }

    :where(html[data-palette="homepage"]) .text-white\/90 {
      color: rgb(var(--palette-light-rgb) / 90%) !important;
    }

    :where(html[data-palette="homepage"]) .to-slate-700\/20 {
      --tw-gradient-to: rgb(var(--palette-dark-rgb) / 20%) !important;
    }

    :where(html[data-palette="homepage"]) footer [class*="text-slate-"] {
      color: var(--palette-sand) !important;
    }

    :where(html[data-palette="homepage"]) .nav-link.nav-active,
    :where(html[data-palette="homepage"]) .mobile-link.nav-active {
      color: var(--palette-dark);
    }

    :where(html[data-palette="homepage"]) .nav-link.nav-active::after {
      background: var(--palette-taupe);
    }

    /* Keep labels readable when a sand utility and a light-text utility coexist. */
    :where(html[data-palette="homepage"]) .bg-sky-400,
    :where(html[data-palette="homepage"]) .bg-sky-500,
    :where(html[data-palette="homepage"]) .bg-sky-600 {
      background-color: var(--palette-sand) !important;
    }

    :where(html[data-palette="homepage"]) a.bg-sky-400,
    :where(html[data-palette="homepage"]) button.bg-sky-400,
    :where(html[data-palette="homepage"]) a.bg-sky-500,
    :where(html[data-palette="homepage"]) button.bg-sky-500,
    :where(html[data-palette="homepage"]) a.bg-sky-600,
    :where(html[data-palette="homepage"]) button.bg-sky-600 {
      color: var(--palette-dark) !important;
    }

    :where(html[data-palette="homepage"]) .bg-slate-300 {
      background-color: var(--palette-sand) !important;
    }

    :where(html[data-palette="homepage"]) .bg-sky-500\/60 {
      background-color: rgb(var(--palette-sand-rgb) / 60%) !important;
    }