/**
 * Simplex Interior — paleta boja
 *
 * Koncept: svijetla stranica (--km-bg) + tamni paneli (--km-panel).
 * Unutar panela, polja i gumbi koriste --km-bg kao „svijetlu ploču".
 *
 * Fiksne brand boje: #B0B0B9, #28282A, #EDEAE4
 *
 * Kontrast (WCAG):
 * - --km-text / --km-muted           → samo na --km-bg (svijetlo)
 * - --km-text-inverse / --km-muted-inverse → na --km-panel / --km-fill (tamno)
 */
:root {
  /* Brand — ne mijenjati */
  --km-bg: #B0B0B9;
  --km-panel: #28282A;
  --km-cream: #EDEAE4;

  /* Tamni slojevi (cool siva porodica, usklađena s panelom) */
  --km-surface: #323236;
  --km-border: #4E4E56;
  --km-fill: #3A3A40;
  --km-fill-hover: #4A4A52;

  /* Tekst na svijetloj podlozi (--km-bg) */
  --km-text: #1C1C1F;
  --km-muted: #56565F;

  /* Tekst na tamnoj podlozi (--km-panel, --km-fill) */
  --km-text-inverse: #EDEAE4;
  --km-muted-inverse: #A8A6B2;

  /* Akcenti */
  --km-oak: #EDEAE4;
  --km-oak-dark: #1E1E21;
  --km-oak-light: #B0B0B9;
  --km-on-accent: #EDEAE4;

  /* Status */
  --km-danger: #C25454;
  --km-success: #4E9465;

  /* Interakcije */
  --km-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --km-duration: 0.22s;
  --km-focus-ring: 0 0 0 2px rgba(237, 234, 228, 0.18);
  --km-hover-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}

/* ─── Gumbi ─── */
button,
[type="submit"],
.action-btn,
.catalog-btn,
.tab-btn,
.tabs button,
.elgrad-model-add-btn,
.search-result-item,
.save-item {
  transition:
    background-color var(--km-duration) var(--km-ease),
    border-color var(--km-duration) var(--km-ease),
    color var(--km-duration) var(--km-ease),
    box-shadow var(--km-duration) var(--km-ease),
    transform var(--km-duration) var(--km-ease),
    opacity var(--km-duration) var(--km-ease);
}

button.submit:hover,
.action-btn:hover:not(.toggle) {
  transform: translateY(-1px);
  box-shadow: var(--km-hover-shadow);
}

button.submit:active,
.action-btn:active {
  transform: translateY(0);
  box-shadow: none;
}

.linkish,
#search-clear,
.save-item .save-del,
.save-item .save-download {
  transition:
    color var(--km-duration) var(--km-ease),
    opacity var(--km-duration) var(--km-ease);
}

.linkish:hover:not(:disabled),
#search-clear:hover {
  color: var(--km-oak);
  opacity: 0.92;
}

/* ─── Polja ─── */
input:not([type="range"]):not([type="color"]):not([type="checkbox"]):not([type="radio"]),
textarea,
select {
  transition:
    border-color var(--km-duration) var(--km-ease),
    box-shadow var(--km-duration) var(--km-ease),
    background-color var(--km-duration) var(--km-ease);
}

input:not([type="range"]):not([type="color"]):not([type="checkbox"]):not([type="radio"]):hover,
textarea:hover,
select:hover {
  border-color: color-mix(in srgb, var(--km-border) 70%, var(--km-oak) 30%);
}

input:not([type="range"]):not([type="color"]):not([type="checkbox"]):not([type="radio"]):focus,
textarea:focus,
select:focus {
  border-color: var(--km-oak);
  box-shadow: var(--km-focus-ring);
  outline: none;
}