/*
 * cjenik.link brand (10.10.2026.): jedini izvor boja branda.
 * Prijelaz svijetlo tirkizno-zelena → plavkasta.
 * --cj-grad samo za naglaske (veliki naslovi, obrubi, indikatori, ikone),
 * nikad za sitni tekst, cijene, oznake ni greške.
 * --cj-grad-btn za pune gumbe s bijelim tekstom (svaka točka ≥ 4,5:1 s bijelom).
 */
:root {
    --cj-brand-from: #2bb7c1;
    --cj-brand-mid: #4fa3e0;
    --cj-brand-to: #7d8ef0;
    --cj-brand-ink: #0b7780;
    --cj-brand-ink-2: #2471b0;
    --cj-brand-soft: #e8f6f7;
    --cj-brand-soft-2: #eef1fd;
    --cj-grad: linear-gradient(100deg, var(--cj-brand-from) 0%, var(--cj-brand-mid) 55%, var(--cj-brand-to) 100%);
    --cj-grad-btn: linear-gradient(100deg, #0b7780 0%, #2471b0 55%, #5563d0 100%);
    --cj-grad-btn-hover: linear-gradient(100deg, #09666e 0%, #1f6299 55%, #4a56b8 100%);
    --cj-focus-ring: 0 0 0 2px #ffffff, 0 0 0 4px #2471b0;
    /*
     * Mali puni gumbi (Rezerviraj, Naruči, Preuzmi PDF, aktivni tab): jedna
     * boja branda (--cj-brand-ink-2) s vrlo blagim prijelazom iste nijanse,
     * ravni (bez sjene), jer se tri točke --cj-grad-btn na malom gumbu
     * čitaju kao dvije boje.
     * Bijeli tekst: #2876b6 4,8:1, #2471b0 5,2:1, hover još tamniji.
     */
    --cj-btn-solid: linear-gradient(180deg, #2876b6 0%, #2471b0 100%);
    --cj-btn-solid-hover: linear-gradient(180deg, #2069a3 0%, #1d5f95 100%);
    /*
     * Pastelne pločice ikona (prvi ekran /kako-radi, nalog 35): samo ikona i
     * njezina pločica, nikad tekst. Ikona je u punoj boji (≥ 3:1 na pločici),
     * pločica je ista boja razrijeđena bijelom (color-mix u tour.css).
     */
    --cj-tint-green: #1f9a62;
    --cj-tint-blue: var(--cj-brand-ink-2);
    --cj-tint-violet: #6555d6;
    --cj-tint-pink: #d23f86;
    --cj-tint-yellow: #a87400;
    --cj-tint-teal: var(--cj-brand-ink);
}

.dark,
[data-theme="dark"] {
    --cj-brand-ink: #5fd0d8;
    --cj-brand-ink-2: #8fb8f0;
    --cj-brand-soft: rgba(43, 183, 193, 0.14);
    --cj-brand-soft-2: rgba(125, 142, 240, 0.14);
    --cj-focus-ring: 0 0 0 2px #0b1214, 0 0 0 4px #8fb8f0;
}

.cj-btn-grad {
    background: var(--cj-grad-btn);
    color: #ffffff;
    border: 0;
}

.cj-btn-grad:hover {
    background: var(--cj-grad-btn-hover);
}

.cj-btn-grad:focus-visible {
    outline: none;
    box-shadow: var(--cj-focus-ring);
}

.cj-grad-text {
    background: var(--cj-grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}