/* =========================================================
   QuickSale POS — Shared Design System
   Vibrant blue-green retail-software theme
   ========================================================= */

:root{
    /* Brand */
    --teal-50:#f0fdfa;
    --teal-100:#ccfbf1;
    --teal-400:#2dd4bf;
    --teal-500:#14b8a6;
    --teal-600:#0d9488;
    --teal-700:#0f766e;
    --teal-900:#134e4a;

    --blue-50:#eff6ff;
    --blue-400:#60a5fa;
    --blue-500:#3b82f6;
    --blue-600:#2563eb;
    --blue-700:#1d4ed8;

    --sky-400:#38bdf8;
    --sky-500:#0ea5e9;

    /* Status */
    --emerald-500:#10b981;
    --emerald-600:#059669;
    --amber-500:#f59e0b;
    --amber-600:#d97706;
    --red-500:#ef4444;
    --red-600:#dc2626;

    /* Neutrals */
    --slate-50:#f8fafc;
    --slate-100:#f1f5f9;
    --slate-200:#e2e8f0;
    --slate-300:#cbd5e1;
    --slate-400:#94a3b8;
    --slate-500:#64748b;
    --slate-600:#475569;
    --slate-700:#334155;
    --slate-800:#1e293b;
    --slate-900:#0f172a;
    --white:#ffffff;

    /* Type */
    --font-display:'Poppins','Segoe UI',sans-serif;
    --font-body:'Inter','Segoe UI',sans-serif;

    /* Signature gradients */
    --brand-gradient:linear-gradient(135deg,#0d9488 0%,#2563eb 100%);
    --brand-gradient-soft:linear-gradient(135deg,#f0fdfa 0%,#eff6ff 100%);
    --brand-gradient-dark:linear-gradient(160deg,#0f766e 0%,#0f172a 65%,#1d4ed8 130%);
    --success-gradient:linear-gradient(135deg,#10b981,#0d9488);
    --danger-gradient:linear-gradient(135deg,#ef4444,#dc2626);

    /* Elevation */
    --shadow-xs:0 1px 3px rgba(15,23,42,0.08);
    --shadow-sm:0 4px 12px rgba(15,23,42,0.08);
    --shadow-md:0 10px 28px rgba(15,23,42,0.12);
    --shadow-lg:0 22px 50px rgba(15,23,42,0.18);
    --shadow-brand:0 10px 28px rgba(13,148,136,0.28);

    /* Radius */
    --r-sm:8px;
    --r-md:14px;
    --r-lg:20px;
    --r-pill:999px;
}

*{ box-sizing:border-box; }

::-webkit-scrollbar{ width:8px; height:8px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{ background:var(--slate-300); border-radius:var(--r-pill); }
::-webkit-scrollbar-thumb:hover{ background:var(--slate-400); }

@keyframes fadeIn{ from{opacity:0;} to{opacity:1;} }
@keyframes slideDown{ from{transform:translateY(-16px); opacity:0;} to{transform:translateY(0); opacity:1;} }
@keyframes slideUp{ from{transform:translateY(16px); opacity:0;} to{transform:translateY(0); opacity:1;} }
@keyframes popIn{ from{transform:scale(0.96); opacity:0;} to{transform:scale(1); opacity:1;} }
@keyframes shimmer{ 0%{background-position:-200px 0;} 100%{background-position:200px 0;} }

/* Reusable pill badge */
.badge-pill{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:4px 12px;
    border-radius:var(--r-pill);
    font-size:12px;
    font-weight:600;
    letter-spacing:.3px;
}
.badge-pill.success{ background:rgba(16,185,129,0.12); color:var(--emerald-600); }
.badge-pill.danger{ background:rgba(239,68,68,0.12); color:var(--red-600); }
.badge-pill.info{ background:rgba(37,99,235,0.10); color:var(--blue-600); }