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

:root{
    /* Brand — one hue family only (pink), light + dark tints */
    --teal-50:#fff5f5;
    --teal-100:#fee2e2;
    --teal-400:#f87171;
    --teal-500:#ef4444;
    --teal-600:#dc2626;
    --teal-700:#991b1b;
    --teal-900:#450a0a;

    --blue-50:#fff5f5;
    --blue-400:#f87171;
    --blue-500:#ef4444;
    --blue-600:#dc2626;
    --blue-700:#b91c1c;

    --sky-400:#ef4444;
    --sky-500:#dc2626;

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

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

    /* Neutrals — pink-tinted greys for a light UI (names kept for
       compatibility with existing var() references across pages) */
    --slate-50:#fff5f5;
    --slate-100:#fee2e2;
    --slate-200:#fecaca;
    --slate-300:#f87171;
    --slate-400:#b45353;
    --slate-500:#991b1b;
    --slate-600:#7f1d1d;
    --slate-700:#450a0a;
    --slate-800:#2b0909;
    --slate-900:#180303;
    --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,#ef4444 0%,#991b1b 100%);
    --brand-gradient-soft:linear-gradient(135deg,#fff5f5 0%,#fee2e2 100%);
    --brand-gradient-dark:linear-gradient(160deg,#f87171 0%,#ef4444 65%,#991b1b 130%);
    --success-gradient:linear-gradient(135deg,#10b981,#059669);
    --danger-gradient:linear-gradient(135deg,#ef4444,#dc2626);

    /* Elevation */
    --shadow-xs:0 1px 3px rgba(69,10,10,0.08);
    --shadow-sm:0 4px 12px rgba(69,10,10,0.08);
    --shadow-md:0 10px 28px rgba(69,10,10,0.12);
    --shadow-lg:0 22px 50px rgba(69,10,10,0.18);
    --shadow-brand:0 10px 28px rgba(239,68,68,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(239,68,68,0.12); color:#dc2626; }
.badge-pill.info{ background:rgba(239,68,68,0.10); color:var(--teal-600); }