/* ==================================================================
   VK Living — warm / premium palette
   ================================================================== */

:root {
    --bg:          #f5f1ea;
    --bg-alt:      #ebe4d8;
    --card:        #ffffff;
    --text:        #231f20;
    --text-soft:   #6b6258;
    --accent:      #c8902f;   /* gold */
    --accent-soft: #dfa236;
    --gold:        #dfa236;
    --line:        #ddd3c2;
    --ok:          #5b7a3a;
    --warn:        #a8782a;
    --err:         #9a2a2a;
    --info:        #4a6f8a;
    --shadow:      0 6px 24px rgba(35, 31, 32, 0.08);
    --shadow-lg:   0 14px 40px rgba(35, 31, 32, 0.14);
    --radius:      4px;
    /* Elegant high-contrast serif for headings — boutique identity, distinct from
       the geometric-sans look of comparable agency sites */
    --serif:       "Playfair Display", "Cormorant Garamond", Georgia, serif;
    --sans:        "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    /* Brand wordmark font — geometric sans matching the "VK LIVING" logo lettering. */
    --brand:       "Montserrat", "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;
    color-scheme:  light;
}

/* Dark theme — applies via either explicit toggle or system preference */
html[data-theme="dark"] {
    --bg:          #16130f;
    --bg-alt:      #211c16;
    --card:        #211c16;
    --text:        #f2ece1;
    --text-soft:   #b3a994;
    --accent:      #dfa236;
    --accent-soft: #ecb44e;
    --gold:        #dfa236;
    --line:        #3a322a;
    --ok:          #88a25c;
    --warn:        #d4a45a;
    --err:         #c45a5a;
    --info:        #7da3bd;
    --shadow:      0 6px 24px rgba(0, 0, 0, 0.4);
    --shadow-lg:   0 14px 40px rgba(0, 0, 0, 0.55);
    color-scheme:  dark;
}

/* System preference, only when no explicit override */
@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) {
        --bg:          #16130f;
        --bg-alt:      #211c16;
        --card:        #211c16;
        --text:        #f2ece1;
        --text-soft:   #b3a994;
        --accent:      #dfa236;
        --accent-soft: #ecb44e;
        --gold:        #dfa236;
        --line:        #3a322a;
        --ok:          #88a25c;
        --warn:        #d4a45a;
        --err:         #c45a5a;
        --info:        #7da3bd;
        --shadow:      0 6px 24px rgba(0, 0, 0, 0.4);
        --shadow-lg:   0 14px 40px rgba(0, 0, 0, 0.55);
        color-scheme:  dark;
    }
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    background: var(--bg);
    color: var(--text);
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
    font-family: var(--serif);
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 0 0 0.6em;
    color: var(--text);
    line-height: 1.15;
}

h1 { font-size: 2.4rem; }
h2 { font-size: 1.7rem; }
h3 { font-size: 1.25rem; }

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-soft); }

img { max-width: 100%; height: auto; display: block; }

button, .btn {
    font-family: var(--sans);
    font-size: 0.95rem;
    font-weight: 500;
    padding: 0.6em 1.2em;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--bg);
    color: var(--text);
    cursor: pointer;
    transition: transform 0.08s ease, box-shadow 0.15s ease, background 0.15s ease;
    text-decoration: none;
    display: inline-block;
}

button:hover, .btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow);
}

.btn-primary {
    background: var(--accent);
    color: var(--bg);
    border-color: var(--accent);
}
.btn-primary:hover { background: var(--accent-soft); color: var(--bg); }

.btn-ghost { background: transparent; }
.btn-danger { background: var(--err); color: var(--bg); border-color: var(--err); }
.btn-danger:hover { background: #b53636; color: var(--bg); }

input, select, textarea {
    font-family: var(--sans);
    font-size: 1rem;
    padding: 0.55em 0.75em;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--card);
    color: var(--text);
    width: 100%;
}

textarea { min-height: 120px; resize: vertical; }

label {
    display: block;
    margin-bottom: 1em;
}
label > span:first-child {
    display: block;
    font-size: 0.85rem;
    color: var(--text-soft);
    margin-bottom: 0.3em;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.badge {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0.2em 0.6em;
    border-radius: 999px;
    /* Tint from the text colour so the neutral pill stays visible on both a white
       card (light) and the dark card surface (dark) — --bg-alt collapses into the
       card colour in dark mode, which would otherwise hide the pill. */
    background: color-mix(in srgb, var(--text-soft) 15%, var(--card));
    color: var(--text-soft);
    margin-right: 0.4em;
}
/* Status variants: tint the card surface with the semantic colour so the pill
   tracks light/dark automatically (both inputs are theme variables), with the
   same colour as readable text. Keep one source of truth per status. */
.badge-ok   { background: color-mix(in srgb, var(--ok)   16%, var(--card)); color: var(--ok); }
.badge-warn { background: color-mix(in srgb, var(--warn) 16%, var(--card)); color: var(--warn); }
.badge-err,
.badge-danger { background: color-mix(in srgb, var(--err) 16%, var(--card)); color: var(--err); }
.badge-info { background: color-mix(in srgb, var(--info) 16%, var(--card)); color: var(--info); }
/* Featured is the one solid pill — brand gold is theme-constant, so pin a dark
   ink that stays readable on gold in both light and dark modes. */
.badge-feat { background: var(--gold); color: #231f20; }
/* Hidden/private listing: a heavier neutral pill, distinct from the status hues. */
.badge-hidden { background: color-mix(in srgb, var(--text-soft) 38%, var(--card)); color: var(--text); }

/* Brand wordmark: force uppercase so the configured owner name (e.g. "VK Living")
   renders like the all-caps logo, without touching adjacent text (e.g. "— Administrácia"). */
.brand-name { text-transform: uppercase; }

.flash {
    padding: 0.7em 1em;
    border-radius: var(--radius);
    margin-bottom: 1em;
    font-size: 0.95rem;
}
/* Same tint-from-semantic-colour approach as the badges, so flash banners read
   correctly in both themes instead of pinning a light pastel background. */
.flash-ok  { background: color-mix(in srgb, var(--ok)   16%, var(--card)); color: var(--ok); }
.flash-err { background: color-mix(in srgb, var(--err)  16%, var(--card)); color: var(--err); }
.flash-warn{ background: color-mix(in srgb, var(--warn) 16%, var(--card)); color: var(--warn); }