/* =============================================================================
 * icons.css — Lucide-style flat color SVG ikony (Ellavia design system).
 *
 * Pravidlá farby:
 *   - Default (svetlé pozadie): #737b87 (sivá)
 *   - Tmavé pozadie / overlay nad navy (#071532): biela
 *
 * Rendering: ikony sú inline SVG s `stroke="currentColor"` — tým CSS riadi
 * farbu cez `color`. Žiadne PNG/sprites.
 *
 * Použitie z PHP: `<?= ts_icon_svg('home') ?>`.
 * Použitie z JS: pripoj inline SVG markup s class="icon icon--<name>".
 * ============================================================================= */

:root {
    --icon-color-on-light: #737b87;
    --icon-color-on-dark:  #ffffff;
    --icon-color-success:  #16803c;
    --icon-color-warning:  #b07020;
    --icon-color-danger:   #b91c1c;
    --icon-color-accent:   var(--accent, #ac8510);
    --icon-color-navy:     #071532;
}

/* ── Base ───────────────────────────────────────────────────────────────── */
.icon {
    display: inline-block;
    vertical-align: -0.125em; /* baseline alignment vedľa textu */
    color: var(--icon-color-on-light);
    flex-shrink: 0;
    line-height: 1;
}

/* SVG vo vnútri sa škáluje cez width/height, fill ostáva none, stroke = currentColor. */
.icon svg,
svg.icon {
    fill: none;
    stroke: currentColor;
}

/* ── Tmavé kontexty → biela ─────────────────────────────────────────────── */
.dark-bg .icon,
.theme-dark .icon,
.bg-navy .icon,
[data-theme="dark"] .icon,
.btn--primary .icon,
.btn-primary .icon,
.site-header .icon,
.hero .icon,
.hero-section .icon,
.section--dark .icon,
.footer .icon,
.site-footer .icon,
.admin-nav .icon,
.admin-sidebar .icon {
    color: var(--icon-color-on-dark);
}

/* ── Size variants ──────────────────────────────────────────────────────── */
.icon--sm { width: 16px; height: 16px; }
.icon--md { width: 20px; height: 20px; } /* default */
.icon--lg { width: 24px; height: 24px; }
.icon--xl { width: 32px; height: 32px; }
.icon--2xl { width: 40px; height: 40px; }

/* ── Sémantické color overrides ─────────────────────────────────────────── */
.icon--success { color: var(--icon-color-success); }
.icon--warning { color: var(--icon-color-warning); }
.icon--danger  { color: var(--icon-color-danger); }
.icon--accent  { color: var(--icon-color-accent); }
.icon--navy    { color: var(--icon-color-navy); }
.icon--muted   { color: #9ba2ad; }

/* Špecifické ikony s charakteristickou farbou (môžu sa selektívne použiť). */
.icon--star.icon--filled { color: #f5a524; fill: #f5a524; stroke: #f5a524; }
.icon--flame.icon--hot   { color: #d44638; }
.icon--check.icon--ok    { color: var(--icon-color-success); }
.icon--x.icon--err       { color: var(--icon-color-danger); }

/* ── Spacing utility ────────────────────────────────────────────────────── */
.icon--mr-xs { margin-right: 0.25rem; }
.icon--mr-sm { margin-right: 0.5rem; }
.icon--ml-xs { margin-left: 0.25rem; }
.icon--ml-sm { margin-left: 0.5rem; }

/* ── Legacy emoji wrapper (transition support — DEPRECATED) ─────────────── */
/* Ak ešte niekde ostal `.emoji-icon` span s textovou emoji, render-ne sa
 * jednotne ako inline-block. Postupne sa nahradí .icon SVG markupom. */
.emoji-icon {
    display: inline-block;
    line-height: 1;
    vertical-align: -0.125em;
    font-style: normal;
    font-feature-settings: "tnum";
}

/* ── Animations (loader) ────────────────────────────────────────────────── */
@keyframes ts-icon-spin {
    to { transform: rotate(360deg); }
}

.icon--spin,
.icon--loader,
.icon--refresh-cw.is-loading {
    animation: ts-icon-spin 1.4s linear infinite;
    transform-origin: 50% 50%;
}

/* ── A11y — vždy aria-hidden, screen reader skry ────────────────────────── */
.icon[aria-hidden="true"] {
    pointer-events: none;
}