/* ============================================================
   CaféOS — Design System (Restoran Muhtar)
   Izvučeno 1:1 iz cafeos-prezentacija.html
   Jedan izvor istine za boje svih ekrana koji se pojavljuju
   u prezentaciji. Uključi ovaj fajl i koristi var(--token).
   ============================================================ */

/* ── TOKENS · LIGHT (default identitet, kao slike) ───── */
:root {
  --bg:     #F6F1EA;
  --s1:     #FFFFFF;
  --s2:     #EFE9DE;
  --s3:     #E4DCCB;
  --border: rgba(0,0,0,.09);

  --gold:   #E8A020;
  --gold2:  #F5C040;
  --teal:   #00C2A8;

  --text:   #1C1510;
  --t2:     #6B6050;
  --t3:     #A09078;

  --ok:     #1FB96A;
  --warn:   #F5A524;
  --err:    #EE5555;

  --r:      12px;
  --r2:     8px;

  /* Mostovi za stari admin layout (theme.*) → CaféOS */
  --sidebar-bg: #1C1510;
  --accent:     var(--gold);
  --accent-dk:  var(--gold2);
  --app-bg:     var(--bg);
}

/* ── TOKENS · DARK (opcija preko data-theme="dark") ──── */
:root[data-theme="dark"] {
  --bg:#08090D; --s1:#0D1118; --s2:#131B26; --s3:#1A2235;
  --border:rgba(255,255,255,.07);
  --text:#EDE8DC; --t2:#8899B0; --t3:#4D5A6E;
  --sidebar-bg:#0D1118; --app-bg:#08090D;
}

/* ── BASE ────────────────────────────────────────────── */
.cafeos, .cafeos body { background: var(--bg); color: var(--text); }
body.cafeos {
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
  line-height: 1.6;
}
.cafeos a { color: var(--gold); text-decoration: none; }

/* ── TIPOGRAFIJA ─────────────────────────────────────── */
.cafeos-serif { font-family: Georgia, 'Times New Roman', serif; }
.cafeos .d1 { font-family: Georgia, serif; font-weight: 700; line-height: 1.1; }
.cafeos .d2 { font-family: Georgia, serif; font-weight: 700; line-height: 1.2; }
.cafeos .eyebrow {
  font-size: .7rem; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--gold);
}
.cafeos .mono, .cafeos-mono { font-family: 'Courier New', Courier, monospace; }

/* ── DUGMAD ──────────────────────────────────────────── */
.cf-btn {
  border: 1px solid var(--border); border-radius: var(--r2);
  padding: 11px 22px; font-weight: 600; font-size: .95rem;
  color: var(--text); background: var(--s2); cursor: pointer;
  transition: all .2s ease;
}
.cf-btn:hover { border-color: var(--t2); }
.cf-btn-primary {
  background: var(--gold); color: #000; border-color: var(--gold);
  font-weight: 700;
}
.cf-btn-primary:hover { background: var(--gold2); transform: translateY(-1px); color: #000; }
.cf-btn-ghost { background: transparent; }

/* ── KARTICE ─────────────────────────────────────────── */
.cf-card {
  background: var(--s2); border: 1px solid var(--border);
  border-radius: var(--r); overflow: hidden;
}
.cf-card-header {
  background: var(--s3); border-bottom: 1px solid var(--border);
  padding: 12px 16px; display: flex; align-items: center; gap: 10px;
}
.cf-card-title {
  font-size: .78rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--t2); flex: 1;
}

/* ── BADGE-OVI ───────────────────────────────────────── */
.cf-badge {
  font-size: .65rem; font-weight: 700; padding: 2px 8px;
  border-radius: 999px; letter-spacing: .04em;
  background: rgba(31,185,106,.15); color: var(--ok);
}
.cf-badge.warn { background: rgba(245,165,36,.15); color: var(--warn); }
.cf-badge.gold { background: rgba(232,160,32,.15); color: var(--gold); }
.cf-badge.teal { background: rgba(0,194,168,.15); color: var(--teal); }
.cf-badge.err  { background: rgba(229,85,85,.15);  color: var(--err); }

/* ── STOLOVI (POS status pločice) ────────────────────── */
.cf-tbl {
  background: var(--s3); border: 1px solid var(--border);
  border-radius: var(--r2); padding: 12px 8px; text-align: center;
  font-family: 'Courier New', monospace; transition: all .3s ease;
}
.cf-tbl .tn { font-size: 1.15rem; font-weight: 700; }
.cf-tbl .ts { font-size: .62rem; color: var(--t2); }
.cf-tbl.free  { border-color: rgba(31,185,106,.4); background: rgba(31,185,106,.08); }
.cf-tbl.free  .tn { color: var(--ok); }
.cf-tbl.busy  { border-color: rgba(232,160,32,.4); background: rgba(232,160,32,.08); }
.cf-tbl.busy  .tn { color: var(--gold); }
.cf-tbl.order { border-color: rgba(0,194,168,.4);  background: rgba(0,194,168,.08); }
.cf-tbl.order .tn { color: var(--teal); }
.cf-tbl.paid  { border-color: rgba(229,85,85,.3);  background: rgba(229,85,85,.06); }
.cf-tbl.paid  .tn { color: var(--err); }

/* ── KUHINJSKI / ŠANK TIKET ──────────────────────────── */
.cf-ticket {
  background: var(--s3); border: 2px solid rgba(232,160,32,.4);
  border-radius: var(--r2); padding: 14px;
}
.cf-ticket.teal { border-color: rgba(0,194,168,.4); }
.cf-ticket .k-num { font-family: Georgia, serif; font-size: 1.6rem; font-weight: 700; color: var(--gold); }
.cf-ticket .k-time { font-size: .7rem; color: var(--t2); font-family: 'Courier New', monospace; }
.cf-ticket .k-qty { color: var(--gold); min-width: 20px; font-weight: 700; }

/* ── PILL / KATEGORIJE ───────────────────────────────── */
.cf-pill {
  padding: 6px 14px; border-radius: 999px; font-size: .78rem; font-weight: 600;
  border: 1px solid var(--border); color: var(--t2); background: transparent;
  transition: all .2s ease; cursor: pointer;
}
.cf-pill.active { background: var(--gold); color: #000; border-color: var(--gold); }

/* ── UTILITY ─────────────────────────────────────────── */
.cf-bg   { background: var(--bg); }
.cf-s1   { background: var(--s1); }
.cf-s2   { background: var(--s2); }
.cf-s3   { background: var(--s3); }
.cf-gold { color: var(--gold); }
.cf-teal { color: var(--teal); }
.cf-muted{ color: var(--t2); }