/* ======================================================================
   HravéPríbehy.sk — Premium Color System v1
   Jeden významový farebný systém pre celý web.

   Pravidlá:
   - atramentová = značka, nadpisy, primárne CTA,
   - slonovinová = hlavné pozadie a pokoj,
   - šalviová = príbehy, dôvera, rodičovský obsah,
   - pistáciová = hádanky, hravosť, objavovanie a „aha!“ moment,
   - modrá = otázky, poznanie, vysvetľovanie,
   - terakota = tvorivosť, aktivity, ľudský dotyk,
   - levanduľa = postavičky, predstavivosť, navigačná atmosféra,
   - medová = biblické príbehy, odmeny, jemné zvýraznenie,
   - petrolejová = profil, účet, formuláre a služby.
   ====================================================================== */

:root {
    color-scheme: light;

    /* Neutrálne farby */
    --hp-color-bg: #f7f3ea;
    --hp-color-bg-warm: #f3ede3;
    --hp-color-surface: #fffcf7;
    --hp-color-surface-strong: #ffffff;
    --hp-color-ink: #182451;
    --hp-color-text: #39435c;
    --hp-color-muted: #6b7283;
    --hp-color-line: #ddd6c9;
    --hp-color-line-soft: rgba(24, 36, 81, 0.10);
    --hp-color-focus: #315ce7;

    /* Šalviová — príbehy a dôvera */
    --hp-color-sage: #6f8875;
    --hp-color-sage-ink: #3f5f49;
    --hp-color-sage-soft: #e8efe7;
    --hp-color-sage-pale: #f3f6f1;
    --hp-color-sage-border: #c9d7c8;

    /* Pistáciová — hádanky, hravosť a objavovanie */
    --hp-color-pistachio: #8faf62;
    --hp-color-pistachio-ink: #58743c;
    --hp-color-pistachio-soft: #eef5e2;
    --hp-color-pistachio-pale: #f7faf1;
    --hp-color-pistachio-border: #d5e3bd;

    /* Modrá — poznanie a Prečo..? */
    --hp-color-sky: #6c98b6;
    --hp-color-sky-ink: #356982;
    --hp-color-sky-soft: #e7f0f5;
    --hp-color-sky-pale: #f2f7f9;
    --hp-color-sky-border: #c7dae5;

    /* Terakota — aktivity a ľudský dotyk */
    --hp-color-clay: #b96f52;
    --hp-color-clay-ink: #7d412e;
    --hp-color-clay-soft: #f4e5de;
    --hp-color-clay-pale: #faf2ed;
    --hp-color-clay-border: #e3c3b6;

    /* Levanduľa — postavičky a predstavivosť */
    --hp-color-lavender: #8876a8;
    --hp-color-lavender-ink: #6b578e;
    --hp-color-lavender-soft: #ede8f5;
    --hp-color-lavender-pale: #f6f3f9;
    --hp-color-lavender-border: #d8cee6;

    /* Medová — tradícia, odmeny, jemné svetlo */
    --hp-color-honey: #b9924b;
    --hp-color-honey-ink: #6b572e;
    --hp-color-honey-soft: #f6edda;
    --hp-color-honey-pale: #fbf7ed;
    --hp-color-honey-border: #e3d4b2;

    /* Petrolejová — profil, účet, formuláre */
    --hp-color-teal: #4f7a79;
    --hp-color-teal-ink: #315d5d;
    --hp-color-teal-soft: #e4eeee;
    --hp-color-teal-pale: #f1f6f5;
    --hp-color-teal-border: #c4d8d6;

    /* Stavové farby */
    --hp-color-success: #54765d;
    --hp-color-success-soft: #e8f0e9;
    --hp-color-warning: #9a7334;
    --hp-color-warning-soft: #f7eedc;
    --hp-color-danger: #9a4450;
    --hp-color-danger-soft: #f5e5e7;

    /* Tieň nie je ďalšia farba — vždy vychádza z atramentovej. */
    --hp-shadow-soft: 0 12px 32px rgba(24, 36, 81, 0.07);
    --hp-shadow-card: 0 16px 42px rgba(24, 36, 81, 0.08);
    --hp-shadow-hover: 0 22px 54px rgba(24, 36, 81, 0.13);
    --hp-shadow-float: 0 28px 72px rgba(24, 36, 81, 0.15);

    /* Spätná kompatibilita — pôvodné názvy tokenov. */
    --hp-home-bg: var(--hp-color-bg);
    --hp-home-surface: var(--hp-color-surface);
    --hp-home-white: var(--hp-color-surface-strong);
    --hp-home-navy: var(--hp-color-ink);
    --hp-home-text: var(--hp-color-text);
    --hp-home-muted: var(--hp-color-muted);
    --hp-home-line: var(--hp-color-line);
    --hp-home-brand-surface: var(--hp-color-bg-warm);
    --hp-home-green: var(--hp-color-sage);
    --hp-home-green-soft: var(--hp-color-sage-soft);
    --hp-home-sky: var(--hp-color-sky);
    --hp-home-sky-soft: var(--hp-color-sky-soft);
    --hp-home-apricot: var(--hp-color-clay);
    --hp-home-apricot-soft: var(--hp-color-clay-soft);
    --hp-home-gold: var(--hp-color-honey);
    --hp-home-focus: var(--hp-color-focus);

    --hp-category-stories: var(--hp-color-sage);
    --hp-category-stories-ink: var(--hp-color-sage-ink);
    --hp-category-stories-soft: var(--hp-color-sage-soft);
    --hp-category-stories-border: var(--hp-color-sage-border);

    --hp-category-riddles: var(--hp-color-pistachio);
    --hp-category-riddles-ink: var(--hp-color-pistachio-ink);
    --hp-category-riddles-soft: var(--hp-color-pistachio-soft);
    --hp-category-riddles-border: var(--hp-color-pistachio-border);

    --hp-category-biblical: var(--hp-color-honey);
    --hp-category-biblical-ink: var(--hp-color-honey-ink);
    --hp-category-biblical-soft: var(--hp-color-honey-soft);
    --hp-category-biblical-border: var(--hp-color-honey-border);

    --hp-category-questions: var(--hp-color-sky);
    --hp-category-questions-ink: var(--hp-color-sky-ink);
    --hp-category-questions-soft: var(--hp-color-sky-soft);
    --hp-category-questions-border: var(--hp-color-sky-border);

    --hp-category-activities: var(--hp-color-clay);
    --hp-category-activities-ink: var(--hp-color-clay-ink);
    --hp-category-activities-soft: var(--hp-color-clay-soft);
    --hp-category-activities-border: var(--hp-color-clay-border);

    --hp-category-characters: var(--hp-color-lavender);
    --hp-category-characters-ink: var(--hp-color-lavender-ink);
    --hp-category-characters-soft: var(--hp-color-lavender-soft);
    --hp-category-characters-border: var(--hp-color-lavender-border);

    --hp-category-profile: var(--hp-color-teal);
    --hp-category-profile-ink: var(--hp-color-teal-ink);
    --hp-category-profile-soft: var(--hp-color-teal-soft);
    --hp-category-profile-border: var(--hp-color-teal-border);

    --hp-home-container: 1180px;
    --hp-home-gutter: clamp(20px, 4vw, 32px);
    --hp-home-section-space: clamp(56px, 7vw, 96px);
    --hp-home-space-1: 4px;
    --hp-home-space-2: 8px;
    --hp-home-space-3: 12px;
    --hp-home-space-4: 16px;
    --hp-home-space-5: 24px;
    --hp-home-space-6: 32px;
    --hp-home-space-7: 48px;
    --hp-home-space-8: 64px;
    --hp-home-space-9: 96px;
    --hp-home-space-10: 128px;
    --hp-home-radius-sm: 14px;
    --hp-home-radius-md: 22px;
    --hp-home-radius-lg: 32px;
    --hp-home-radius-pill: 999px;
    --hp-home-border: 1px solid var(--hp-home-line);
    --hp-home-shadow-soft: var(--hp-shadow-soft);
    --hp-home-shadow-hover: var(--hp-shadow-hover);
    --hp-home-motion-fast: 160ms;
    --hp-home-motion-normal: 220ms;
    --hp-home-ease: ease-out;
}

/* Globálny pokojný základ. Nočné čítanie zostáva riadené vlastným režimom. */
body:not(.hp-night-reading) {
    color: var(--hp-color-text);
    background-color: var(--hp-color-bg);
}

/* Farebný význam spoločného menu podľa aktuálneho priestoru webu. */
body.hp-content-v3--stories,
body.hp-content-v3--biblical {
    --hp-shell-nav-accent: var(--hp-color-sage);
    --hp-shell-nav-accent-soft: var(--hp-color-sage-soft);
}

body.hp-riddles {
    --hp-shell-nav-accent: var(--hp-color-pistachio);
    --hp-shell-nav-accent-soft: var(--hp-color-pistachio-soft);
}

body.hp-content-v3--why {
    --hp-shell-nav-accent: var(--hp-color-sky);
    --hp-shell-nav-accent-soft: var(--hp-color-sky-soft);
}

body.hp-content-v3--activities {
    --hp-shell-nav-accent: var(--hp-color-clay);
    --hp-shell-nav-accent-soft: var(--hp-color-clay-soft);
}

body.hp-content-v3--learning,
body.hp-characters-v2,
body.hp-character-profile-v2 {
    --hp-shell-nav-accent: var(--hp-color-lavender);
    --hp-shell-nav-accent-soft: var(--hp-color-lavender-soft);
}

body.hp-profile-v2,
body.hp-login-v2,
body.hp-register-v2,
body.hp-forgot-password-v2,
body.hp-reset-password-v2,
body.hp-account-deleted-v2,
body.hp-newsletter-confirmed-v2,
body.hp-newsletter-unsubscribe-v2,
body.hp-contact-v2 {
    --hp-shell-nav-accent: var(--hp-color-teal);
    --hp-shell-nav-accent-soft: var(--hp-color-teal-soft);
}

body.hp-about-v2,
body.hp-editorial-v2,
body.hp-promise-v2,
body.hp-legal-v2 {
    --hp-shell-nav-accent: var(--hp-color-sage);
    --hp-shell-nav-accent-soft: var(--hp-color-sage-soft);
}

/* ======================================================================
   HP INTEGRATED TOP SPACE v1 — header, breadcrumb a hero tvoria jeden priestor.
   ====================================================================== */
:root {
    --hp-shell-page-top: var(--hp-color-bg);
    --hp-shell-page-top-soft: var(--hp-color-bg-warm);
    --hp-shell-page-top-line: color-mix(in srgb, var(--hp-color-ink) 8%, transparent);
}
/* Index a všetky neobsahové stránky používajú jeden neutrálny horný priestor.
   Sekčná farba ostáva iba v akcentoch, nie ako samostatná doska menu. */
body.hp-home-v2,
body.hp-profile-v2,
body.hp-login-v2,
body.hp-register-v2,
body.hp-forgot-v2,
body.hp-forgot-password-v2,
body.hp-reset-v2,
body.hp-reset-password-v2,
body.hp-account-deleted-v2,
body.hp-newsletter-confirmed-v2,
body.hp-newsletter-unsubscribe-v2,
body.hp-contact-v2,
body.hp-about-v2,
body.hp-editorial-v2,
body.hp-promise-v2,
body.hp-legal-v2 {
    --hp-shell-page-top: var(--hp-color-bg-warm);
    --hp-shell-page-top-soft: var(--hp-color-bg-warm);
}

body.hp-profile-v2,
body.hp-login-v2,
body.hp-register-v2,
body.hp-forgot-v2,
body.hp-forgot-password-v2,
body.hp-reset-v2,
body.hp-reset-password-v2,
body.hp-account-deleted-v2,
body.hp-newsletter-confirmed-v2,
body.hp-newsletter-unsubscribe-v2,
body.hp-contact-v2 {
    --hp-shell-nav-accent: var(--hp-color-teal);
    --hp-shell-nav-accent-soft: var(--hp-color-teal-soft);
}

body.hp-content-v3--stories { --hp-shell-page-top: var(--hp-color-sage-pale); --hp-shell-page-top-soft: var(--hp-color-sage-soft); }
body.hp-riddles { --hp-shell-page-top: var(--hp-color-pistachio-pale); --hp-shell-page-top-soft: var(--hp-color-pistachio-soft); }
body.hp-content-v3--biblical { --hp-shell-page-top: var(--hp-color-honey-pale); --hp-shell-page-top-soft: var(--hp-color-honey-soft); }
body.hp-content-v3--why { --hp-shell-page-top: var(--hp-color-sky-pale); --hp-shell-page-top-soft: var(--hp-color-sky-soft); }
body.hp-content-v3--activities { --hp-shell-page-top: var(--hp-color-clay-pale); --hp-shell-page-top-soft: var(--hp-color-clay-soft); }
body.hp-content-v3--learning,
body.hp-characters-v2,
body.hp-character-profile-v2 { --hp-shell-page-top: var(--hp-color-lavender-pale); --hp-shell-page-top-soft: var(--hp-color-lavender-soft); }