/* =====================================================================
   firma_teme.css - teme profila firme (firme_prikaz.tema_id 1 do 21).
   Učitava se samo kad firma ima izabranu temu.

   Svaka tema je jedna boja akcenta (--accent) uz zaobljenost uglova; sve ostalo se izvodi iz nje:
   dugmad, ikonice, naslovi, naslovni deo, čipovi i linije. Kartice ostaju čiste (bez providnosti).
   Teme 6, 9, 13, 14, 16 i 18 su tamne (tamna pozadina, svetao tekst), ostale su svetle.
   Opciono se postavlja i --pbg (pozadina strane).
   ===================================================================== */

.pf[data-theme^="t"] {
    --pa: var(--accent);
    --pink: var(--accent);
    --pon: #fff;
    --ptx: #1d1d1b;
    --pmu: #66645e;
    --pbg: color-mix(in srgb, var(--accent) 9%, #f6f5f1);
    --pcard: #fff;
    --pline: color-mix(in srgb, var(--accent) 16%, #e2dfd6);
    --psoft: color-mix(in srgb, var(--accent) 10%, #fff);
    --hsh: color-mix(in srgb, var(--accent) 85%, #000);
    --cover: color-mix(in srgb, var(--accent) 88%, #000);
    --coveron: #fff;
    --ctc: var(--accent);
    /* uska traka boje teme na vrhu svake kartice */
    --ctop: 3px;
    --radb: min(var(--rad), 12px);
    --radc: min(calc(var(--rad) * 2), 999px);
}

.pf[data-theme^="t"] .panel,
.pf[data-theme^="t"] .sb {
    color: var(--ptx);
}

.pf[data-theme^="t"] .plogo {
    background: #fff;
}

/* Tamne teme */
.pf[data-theme="t6"],
.pf[data-theme="t9"],
.pf[data-theme="t13"],
.pf[data-theme="t14"],
.pf[data-theme="t16"],
.pf[data-theme="t18"] {
    --pon: #111;
    --ptx: #f1f1ee;
    --pmu: #a4a6ab;
    --pcard: color-mix(in srgb, #fff 7%, var(--pbg));
    --pline: color-mix(in srgb, #fff 14%, var(--pbg));
    --psoft: color-mix(in srgb, var(--accent) 20%, var(--pcard));
    --hsh: var(--accent);
    --cover: color-mix(in srgb, var(--accent) 14%, var(--pbg));
    --coveron: var(--accent);
    --okbg: #1e3a2b;
    --oktx: #6fe0a0;
    --nobg: #3a2020;
    --notx: #ff9c94;
}

/* Boje tema */
.pf[data-theme="t1"] {
    --accent: #222222;
    --rad: 4px;
}

.pf[data-theme="t2"] {
    --accent: #5f8a1c;
    --rad: 12px;
}

.pf[data-theme="t3"] {
    --accent: #a52a2a;
    --rad: 6px;
}

.pf[data-theme="t4"] {
    --accent: #004179;
    --rad: 12px;
}

.pf[data-theme="t5"] {
    --accent: #2f5d86;
    --rad: 12px;
    --pbg: #e9ecef;
}

.pf[data-theme="t6"] {
    --accent: #e5e5e5;
    --rad: 6px;
    --pbg: #0d0d0d;
}

.pf[data-theme="t7"] {
    --accent: #800000;
    --rad: 6px;
    --pbg: #fff4e6;
}

.pf[data-theme="t8"] {
    --accent: #7a1d66;
    --rad: 4px;
}

.pf[data-theme="t9"] {
    --accent: #d4af37;
    --rad: 12px;
    --pbg: #121008;
}

.pf[data-theme="t10"] {
    --accent: #b01e1e;
    --rad: 12px;
}

.pf[data-theme="t11"] {
    --accent: #7b2d8e;
    --rad: 6px;
}

.pf[data-theme="t12"] {
    --accent: #a0522d;
    --rad: 6px;
    --pbg: #fff1e0;
}

.pf[data-theme="t13"] {
    --accent: #ffa726;
    --rad: 3px;
    --pbg: #0b1a4a;
}

.pf[data-theme="t14"] {
    --accent: #ffbc42;
    --rad: 2px;
    --pbg: #0a3d5c;
}

.pf[data-theme="t15"] {
    --accent: #2e7d32;
    --rad: 6px;
    --pbg: #f7fbe0;
}

.pf[data-theme="t16"] {
    --accent: #ff66d8;
    --rad: 8px;
    --pbg: #23253a;
}

.pf[data-theme="t17"] {
    --accent: #7a4a12;
    --rad: 3px;
    --pbg: #fbf6ea;
}

.pf[data-theme="t18"] {
    --accent: #f3761b;
    --rad: 8px;
    --pbg: #14102a;
}

.pf[data-theme="t19"] {
    --accent: #ab202e;
    --rad: 6px;
}

.pf[data-theme="t20"] {
    --accent: #8f023a;
    --rad: 12px;
    --pbg: #fbf3f7;
}

.pf[data-theme="t21"] {
    --accent: #04505A;
    --rad: 6px;
    --pbg: #fbf7f1;
}