/* =========================================================
   QuickSale POS — Shared Design System
   "Cosmetics Pink" theme — light, single-hue, attractive
   ========================================================= */

:root{
    /* Brand — one hue family only (pink), light + dark tints */
    --teal-50:#f0fdf4;
    --teal-100:#dcfce7;
    --teal-400:#4ade80;
    --teal-500:#16a34a;
    --teal-600:#15803d;
    --teal-700:#14532d;
    --teal-900:#052e16;

    --blue-50:#f0fdf4;
    --blue-400:#4ade80;
    --blue-500:#16a34a;
    --blue-600:#15803d;
    --blue-700:#166534;

    --sky-400:#16a34a;
    --sky-500:#15803d;

    /* Status (kept universal — success/warning/danger meaning stays clear) */
    --emerald-500:#10b981;
    --emerald-600:#059669;
    --amber-500:#f59e0b;
    --amber-600:#d97706;
    --red-500:#16a34a;
    --red-600:#15803d;

    /* Surfaces (light theme) */
    --surface:#ffffff;
    --surface-alt:#ecfdf5;

    /* Neutrals — pink-tinted greys for a light UI (names kept for
       compatibility with existing var() references across pages) */
    --slate-50:#f0fdf4;
    --slate-100:#dcfce7;
    --slate-200:#bbf7d0;
    --slate-300:#4ade80;
    --slate-400:#3f7a57;
    --slate-500:#14532d;
    --slate-600:#064e3b;
    --slate-700:#052e16;
    --slate-800:#052e16;
    --slate-900:#011c15;
    --white:#ffffff;

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

    /* Signature gradients — one hue, light to deep pink */
    --brand-gradient:linear-gradient(135deg,#16a34a 0%,#14532d 100%);
    --brand-gradient-soft:linear-gradient(135deg,#f0fdf4 0%,#dcfce7 100%);
    --brand-gradient-dark:linear-gradient(160deg,#4ade80 0%,#16a34a 65%,#14532d 130%);
    --success-gradient:linear-gradient(135deg,#10b981,#059669);
    --danger-gradient:linear-gradient(135deg,#16a34a,#15803d);

    /* Elevation */
    --shadow-xs:0 1px 3px rgba(5,46,22,0.08);
    --shadow-sm:0 4px 12px rgba(5,46,22,0.08);
    --shadow-md:0 10px 28px rgba(5,46,22,0.12);
    --shadow-lg:0 22px 50px rgba(5,46,22,0.18);
    --shadow-brand:0 10px 28px rgba(22,163,74,0.25);

    /* 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(--teal-500); }

@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:#059669; }
.badge-pill.danger{ background:rgba(22,163,74,0.12); color:#15803d; }
.badge-pill.info{ background:rgba(22,163,74,0.10); color:var(--teal-600); }