/* ===== SweetPOS V2 — Café Luxe theme overlay =====
   Transforms the whole app to warm premium café look without rewriting JS.
   Loaded AFTER style.css so it overrides. */

:root{
  --cl-cream:#f7f0e4; --cl-ivory:#fffaf0; --cl-card:#fffefb;
  --cl-espresso:#2a1d15; --cl-mocha:#7a5c44; --cl-taupe:#b09a86;
  --cl-gold:#e8a93c; --cl-gold-lt:#ffd97a; --cl-gold-d:#c9851a;
  --cl-green:#2e9e63; --cl-green-lt:#52c98a;
  --cl-rose:#e87a96; --cl-berry:#b15ec9; --cl-sky:#4f9ee8;
  --cl-sh:60,40,24;
}

/* warm gradient background */
body{
  background:
    radial-gradient(120% 80% at 100% -10%, #efe3d0 0%, transparent 48%),
    radial-gradient(90% 60% at -10% 4%, #f3ece0 0%, transparent 42%),
    linear-gradient(175deg,#f7f1e8 0%,#efe7da 100%) !important;
  color:var(--cl-espresso);
  -webkit-font-smoothing:antialiased;
}

/* headings → playful premium fonts */
h1,h2,h3,.font-bold{font-family:'Mali','Fredoka',sans-serif !important;letter-spacing:.1px}
.text-lg,.text-xl,.text-2xl{font-family:'Fredoka','Mali',sans-serif !important}

/* prices / numbers feel */
.text-primary{color:var(--cl-gold-d) !important}

/* CARDS — glass + layered depth (covers most white panels) */
.bg-white{
  background:linear-gradient(155deg,var(--cl-card) 0%,#f6efe4 100%) !important;
  border-color:rgba(255,255,255,.85) !important;
  box-shadow:0 24px 44px -22px rgba(var(--cl-sh),.4),0 8px 18px -12px rgba(var(--cl-sh),.25),inset 0 2px 3px rgba(255,255,255,1) !important;
}
.rounded-lg{border-radius:20px !important}
.rounded-xl,.rounded-2xl{border-radius:24px !important}

/* header / top bar */
header,.header,[class*="bg-primary"]{}
.bg-primary{
  background:linear-gradient(140deg,var(--cl-gold-lt),var(--cl-gold) 55%,var(--cl-gold-d)) !important;
  box-shadow:0 12px 24px -8px rgba(201,133,26,.5),inset 0 2px 3px rgba(255,255,255,.5) !important;
}
.text-white{color:#fff !important}

/* action buttons (green = add/pay) get depth */
button.bg-primary,.btn-primary{
  background:linear-gradient(140deg,var(--cl-green-lt),var(--cl-green)) !important;
  box-shadow:0 10px 20px -7px rgba(46,158,99,.55),inset 0 1px 2px rgba(255,255,255,.4) !important;
  border:0 !important;
}

/* surface */
.bg-surface{background:transparent !important}

/* bottom nav → floating glass */
nav.fixed,.bottom-nav,[class*="fixed"][class*="bottom"]{
  background:linear-gradient(180deg,rgba(255,253,250,.94),rgba(251,248,242,.86)) !important;
  backdrop-filter:blur(28px) saturate(150%);
  border:1px solid rgba(255,255,255,.95) !important;
  box-shadow:0 -10px 40px -16px rgba(var(--cl-sh),.4) !important;
}

/* category chips / pills */
.rounded-full{transition:transform .2s,box-shadow .2s}

/* product / item cards subtle 3D on press */
[onclick]:active{transform:scale(.98)}

/* gold accent for active states */
.text-primary-dark{color:var(--cl-gold-d) !important}
.border-primary{border-color:var(--cl-gold) !important}
.bg-primary-light,.bg-primary-50{background:rgba(232,169,60,.12) !important}

/* smooth all transitions */
button,a,.rounded-lg,.rounded-xl,.bg-white{transition:transform .15s cubic-bezier(.22,1,.36,1),box-shadow .15s}

@media(prefers-reduced-motion:reduce){*{transition:none !important}}