/* =====================================================================
   ONLIRISE — wspólny motyw całej strony (ładowany PO app.css)
   Ciemny (domyślny, jak panel /panel) ustawia theme.js: <html data-theme="dark">.
   Jasny = oryginalny wygląd z app.css (data-theme="light" albo brak JS).
   Ten sam klucz localStorage co panel („onlirise.theme”) — wybór działa wszędzie.
   ===================================================================== */

/* ---------- Tokeny: ciemny motyw (te same wartości co public/assets/panel/style.css) ---------- */
:root[data-theme="dark"] {
    color-scheme: dark;
    --bg-primary: #0E1417;
    --bg-card: #162024;
    --bg-tint: #121B1F;
    --bg-teal-dark: #1F7A70;
    --bg-teal-gradient: linear-gradient(135deg, #123A37 0%, #1F6F66 55%, #2A9D8F 100%);
    --accent-teal: #4ECDC4;
    --accent-blue: #7DB3EC;
    --accent-blue-light: #24384A;
    --teal-text: #4ECDC4;            /* ≈ 9:1 na #162024 */
    --text-dark: #E9F0F1;            /* ≈ 15:1 */
    --text-muted: #A7B6BA;           /* ≈ 7.6:1 */
    --text-white: #FFFFFF;
    --border-light: #2A3A40;
    --border-strong: #3C5058;
    --btn-dark: #4ECDC4;             /* przycisk główny: teal + ciemny tekst */
    --icon-bg-teal: rgba(78, 205, 196, .14);
    --icon-bg-blue: rgba(125, 179, 236, .14);
    --icon-bg-purple: rgba(169, 156, 255, .14);
    --danger: #FF8A80;
    --danger-bg: rgba(255, 138, 128, .12);
    --success: #5EE0A0;
    --success-bg: rgba(94, 224, 160, .12);
    --warning-bg: rgba(245, 181, 68, .14);
    --focus: #8FE9E2;
    --shadow-card: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .25);
    --shadow-lift: 0 12px 32px rgba(0, 0, 0, .4), 0 0 0 1px rgba(78, 205, 196, .28), 0 0 32px rgba(78, 205, 196, .2);
}

/* ---------- Jasny: przycisk główny i akcenty jak w jasnym motywie panelu (turkus zamiast granatu) ---------- */
:root[data-theme="light"] { --btn-dark: #1F7A70; --focus: #1F7A70; }
:root[data-theme="light"] .btn--primary:hover { background: #186359; }

/* ---------- Ciemny: kolory zapisane w app.css na sztywno ---------- */
:root[data-theme="dark"] .skip-link,
:root[data-theme="dark"] .skip-link:focus { color: #071214; }
:root[data-theme="dark"] .btn--primary,
:root[data-theme="dark"] .btn--primary:hover { color: #071214; box-shadow: 0 2px 10px rgba(78, 205, 196, .25); }
:root[data-theme="dark"] .btn--primary:hover { background: #6FDCD4; }
:root[data-theme="dark"] .btn--secondary { background: var(--bg-card); border-color: var(--border-strong); }
:root[data-theme="dark"] .btn--secondary:hover { border-color: var(--teal-text); }
:root[data-theme="dark"] .btn--danger,
:root[data-theme="dark"] .btn--danger:hover { background: #E5484D; color: #FFFFFF; }

:root[data-theme="dark"] .site-nav { box-shadow: 0 16px 32px rgba(0, 0, 0, .4); }
:root[data-theme="dark"] .badge { background: var(--icon-bg-teal); }

:root[data-theme="dark"] .hero {
    background: radial-gradient(900px 520px at 85% 0%, rgba(78, 205, 196, .16) 0%, rgba(14, 20, 23, 0) 62%), var(--bg-primary);
}
:root[data-theme="dark"] .shape--sphere { background: radial-gradient(circle at 30% 30%, rgba(78, 205, 196, .35) 0%, rgba(31, 122, 112, .25) 45%, rgba(14, 20, 23, 0) 72%); opacity: .8; box-shadow: none; }
:root[data-theme="dark"] .shape--arch { opacity: .35; }
:root[data-theme="dark"] .shape--pill { display: none; }

:root[data-theme="dark"] .why-ladder__step { background: rgba(22, 32, 36, .88); border-color: var(--border-light); }
:root[data-theme="dark"] .why-ladder__result { background: var(--bg-tint); color: var(--text-dark); border: 1px solid var(--teal-text); }

:root[data-theme="dark"] .card { border-color: var(--border-light); }
:root[data-theme="dark"] .section--tinted { background: var(--bg-tint); border-block: 1px solid var(--border-light); }
:root[data-theme="dark"] .section--tinted .card { background: var(--bg-card); border-color: var(--border-light); }
:root[data-theme="dark"] .icon-circle--blue { color: #7DB3EC; }
:root[data-theme="dark"] .icon-circle--purple { color: #A99CFF; }
:root[data-theme="dark"] .checklist li { background: var(--bg-card); border: 1px solid var(--border-light); }
:root[data-theme="dark"] .step { border: 1px solid var(--border-light); }
:root[data-theme="dark"] .step__num { color: #071214; }
:root[data-theme="dark"] .fill-in,
:root[data-theme="dark"] mark.fill-in { background: rgba(245, 181, 68, .18); color: #F5C56B; }

:root[data-theme="dark"] .form__summary,
:root[data-theme="dark"] .form__status.is-error,
:root[data-theme="dark"] .app-page__card--danger { border-color: rgba(255, 138, 128, .45); }
:root[data-theme="dark"] .form__status.is-success { border-color: rgba(94, 224, 160, .45); }
:root[data-theme="dark"] .form__status.is-busy,
:root[data-theme="dark"] .review-changes { border-color: var(--border-strong); }

:root[data-theme="dark"] .field__input { background-color: #1C282D; color: var(--text-dark); }
:root[data-theme="dark"] .field__input::placeholder { color: #8797A0; opacity: 1; }
:root[data-theme="dark"] .field__input:hover { border-color: #5A6E75; }
:root[data-theme="dark"] .field__input:focus-visible { box-shadow: 0 0 0 3px rgba(78, 205, 196, .28); }
:root[data-theme="dark"] .field__select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23E9F0F1' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
:root[data-theme="dark"] .chip span { background-color: #1C282D; }
:root[data-theme="dark"] .chip input:checked + span { background: var(--teal-text); border-color: var(--teal-text); color: #071214; }

:root[data-theme="dark"] .final-cta { background: linear-gradient(135deg, rgba(78, 205, 196, .12), transparent 70%), var(--bg-tint); border-block: 1px solid var(--border-light); color: var(--text-dark); }
:root[data-theme="dark"] .final-cta p { color: var(--text-muted); }
:root[data-theme="dark"] .final-cta .btn--primary,
:root[data-theme="dark"] .final-cta .btn--primary:hover { background: var(--teal-text); color: #071214; }

:root[data-theme="dark"] .auth-card,
:root[data-theme="dark"] .status-card { border: 1px solid var(--border-light); }

:root[data-theme="dark"] .wizard-steps__item--current { color: var(--teal-text); }
:root[data-theme="dark"] .format-option input:checked + .format-option__body { background: rgba(78, 205, 196, .08); }
:root[data-theme="dark"] .variant__badge { color: #071214; }
:root[data-theme="dark"] .review-warnings,
:root[data-theme="dark"] .review-stale,
:root[data-theme="dark"] .review-fill-in { background: rgba(245, 181, 68, .12); color: #F5C56B; border-color: rgba(245, 181, 68, .4); }
:root[data-theme="dark"] .score--good { background: rgba(94, 224, 160, .14); color: #5EE0A0; }
:root[data-theme="dark"] .score--ok { background: rgba(245, 181, 68, .14); color: #F5C56B; }
:root[data-theme="dark"] .score--low { background: rgba(255, 138, 128, .14); color: #FF8A80; }

/* =====================================================================
   NAGŁÓWEK — wygląd jak w panelu (oba motywy)
   ===================================================================== */
.site-header { border-bottom: 1px solid var(--border-light); }
:root[data-theme="dark"] .site-header { background: rgba(14, 20, 23, .86); }
.site-header__inner { min-height: 64px; }
.brand__logo { width: 32px; height: 32px; }
.brand__name { font-weight: 800; }

.site-nav__list a { font-weight: 600; border-radius: 10px; }
.site-nav__list a:hover { background: var(--icon-bg-teal); color: var(--text-dark); }
.site-nav__list a[aria-current="page"] { background: var(--icon-bg-teal); color: var(--teal-text); }

.site-nav__tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.site-nav__tools .site-nav__logout { margin: 0; }
.theme-toggle {
    place-items: center; width: 40px; height: 40px; padding: 0; flex: none;
    color: var(--text-dark); background: transparent; border: 1px solid var(--border-light); border-radius: 50%; cursor: pointer;
    transition: border-color .2s, background-color .2s;
}
.theme-toggle:hover { border-color: var(--teal-text); background: var(--icon-bg-teal); }
.theme-toggle svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.theme-toggle__moon { display: none; }
:root[data-theme="light"] .theme-toggle__sun { display: none; }
:root[data-theme="light"] .theme-toggle__moon { display: block; }
.theme-toggle { display: none; }      /* bez JS przełącznik nic by nie zrobił */
.js .theme-toggle { display: inline-grid; }

@media (min-width: 1024px) {
    /* Jak w panelu: menu zaraz za logo, narzędzia (motyw, wyloguj) po prawej */
    .site-header__inner { justify-content: flex-start; }
    .brand { margin-right: var(--s2); }
    .site-nav, .js .site-nav { flex: 1; justify-content: space-between; }
    .site-nav__list { gap: 2px; }
    .site-nav__list a { padding: 8px 10px; font-size: .9063rem; }
    .site-nav { gap: var(--s2); }
}
@media (min-width: 1024px) and (max-width: 1179px) {
    .site-nav--app .site-nav__list a { padding: 8px 7px; font-size: .875rem; }
}

/* =====================================================================
   STRONA GŁÓWNA — „Co dziś tworzysz?” w hero + przykład promptu
   ===================================================================== */
.hero-types__label { margin-bottom: var(--s1); font-size: .8125rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--teal-text); }
.hero-types { display: grid; gap: 10px; grid-template-columns: 1fr; }
.hero-types__item {
    position: relative; display: grid; grid-template-columns: 44px 1fr; column-gap: 14px; align-items: center;
    padding: 14px 16px; background: var(--bg-card); border: 1px solid var(--border-light); border-radius: var(--radius);
    box-shadow: var(--shadow-card); transition: transform .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.hero-types__item:hover, .hero-types__item:focus-within { transform: translateY(-3px); border-color: var(--teal-text); box-shadow: var(--shadow-lift); }
.hero-types__icon { grid-row: span 2; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; color: var(--teal-text); background: var(--icon-bg-teal); }
.hero-types__link { font-weight: 700; color: var(--text-dark); text-decoration: none; line-height: 1.3; }
.hero-types__link::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); } /* cała karta klikalna */
.hero-types__link:hover { color: var(--text-dark); }
.hero-types__link:focus-visible { outline: none; }
.hero-types__item:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }
.hero-types__text { font-size: .875rem; color: var(--text-muted); }
@media (min-width: 640px) { .hero-types { grid-template-columns: 1fr 1fr; } }

.example + .example { margin-top: var(--s4); }
.example__prompt {
    margin: 0; padding: var(--s2); overflow-x: auto;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .8125rem; line-height: 1.65;
    white-space: pre-wrap; overflow-wrap: anywhere;
    background: var(--bg-card); border: 1px solid var(--border-light); border-radius: 12px; color: var(--text-dark);
}

/* =====================================================================
   STOPKA — wspólna (Blade i panel)
   ===================================================================== */
:root[data-theme="dark"] .site-footer { background: var(--bg-primary); }
.site-footer__links a { color: var(--text-muted); }

@media print {
    :root[data-theme="dark"] { --bg-primary: #fff; --bg-card: #fff; --text-dark: #1A1A2E; --text-muted: #4B5563; }
}