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

:root{
    /* Brand — one hue family only (pink), light + dark tints */
    --teal-50:#f4f7fb;
    --teal-100:#e8eef7;
    --teal-400:#4f7cac;
    --teal-500:#173b67;
    --teal-600:#123158;
    --teal-700:#0b2545;
    --teal-900:#071a2f;

    --blue-50:#f4f7fb;
    --blue-400:#4f7cac;
    --blue-500:#173b67;
    --blue-600:#123158;
    --blue-700:#0a1f3a;

    --sky-400:#173b67;
    --sky-500:#123158;

    /* Status (kept universal — success/warning/danger meaning stays clear) */
    --emerald-500:#4f7cac;
    --emerald-600:#173b67;
    --amber-500:#f59e0b;
    --amber-600:#d97706;
    --red-500:#ef4444;
    --red-600:#dc2626;

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

    /* Neutrals — pink-tinted greys for a light UI (names kept for
       compatibility with existing var() references across pages) */
    --slate-50:#f4f7fb;
    --slate-100:#e8eef7;
    --slate-200:#c8d5e8;
    --slate-300:#4f7cac;
    --slate-400:#6883a3;
    --slate-500:#0b2545;
    --slate-600:#334e70;
    --slate-700:#071a2f;
    --slate-800:#071a2f;
    --slate-900:#04111f;
    --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,#173b67 0%,#0b2545 100%);
    --brand-gradient-soft:linear-gradient(135deg,#f4f7fb 0%,#e8eef7 100%);
    --brand-gradient-dark:linear-gradient(160deg,#4f7cac 0%,#173b67 65%,#0b2545 130%);
    --success-gradient:linear-gradient(135deg,#4f7cac,#173b67);
    --danger-gradient:linear-gradient(135deg,#173b67,#123158);

    /* Elevation */
    --shadow-xs:0 1px 3px rgba(7,26,47,0.08);
    --shadow-sm:0 4px 12px rgba(7,26,47,0.08);
    --shadow-md:0 10px 28px rgba(7,26,47,0.12);
    --shadow-lg:0 22px 50px rgba(7,26,47,0.18);
    --shadow-brand:0 10px 28px rgba(23,59,103,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(79,124,172,0.12); color:#173b67; }
.badge-pill.danger{ background:rgba(23,59,103,0.12); color:#123158; }
.badge-pill.info{ background:rgba(23,59,103,0.10); color:var(--teal-600); }