@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

body{

    font-family:"Poppins",sans-serif;

    background:var(--page-bg);

    color:var(--text);

    min-height:100vh;

    transition:background .25s ease,color .25s ease;

}

/* ============================
   Global UI variable-driven overrides
   Ensures components use design tokens and improve dark mode
   ============================ */

/* Inputs / Selects / Textareas */
input, textarea, select, .form-control, .form-select, .input-ui{
    background:var(--card-secondary);
    color:var(--text);
    border:1px solid var(--border-color);
    border-radius:12px;
    padding:12px;
    outline:none;
    transition:var(--transition), box-shadow .2s ease;
}

input::placeholder, textarea::placeholder{
    color:var(--placeholder);
    opacity:1;
}

input:focus, textarea:focus, select:focus{
    box-shadow:0 6px 20px rgba(0,0,0,.06);
    border-color:var(--primary-color);
}

/* Buttons */
button, .btn-primary, .btn-secondary, .btn-login, .btn-start{
    transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
    border-radius:12px;
}

button:focus{
    outline:2px solid rgba(99,102,241,.12);
}

/* Cards & surfaces */
.card-ui, .option-card, .product-card, .info-card, .selection-card, .history-card, .last-order-card, .profile-card, .stat-box{
    background:var(--card);
    color:var(--text);
    border:1px solid var(--border-color);
    box-shadow:var(--shadow-sm);
}

.section-subtitle{ color:var(--text-secondary); }

/* Badges */
.badge-ui, .badge-blue{
    background:var(--card-secondary);
    color:var(--primary-color);
    border-radius:999px;
    padding:6px 12px;
}

/* Toasts */
.easy-toast{ background:var(--surface); color:var(--text); box-shadow:var(--shadow-md); }

/* Utility */
.icon-box, .icon-circle{ background:linear-gradient(135deg,var(--primary-color),var(--primary-light)); }

/* Normalize literal white backgrounds to surface token for consistent theming */
.selection-card,
.product-chat-card,
.product-card,
.ticket-family,
.stat-card,
.recent-card,
.mobile-sidebar,
.login-card,
.card-mobile,
.welcome-card,
.profile-card{
    background:var(--card);
    color:var(--text);
}


a{

    text-decoration:none;
    color:inherit;

}

button{

    cursor:pointer;

    transition:var(--transition);

}

.page{

    width:100%;
    min-height:100vh;

}

.mobile-container{

    width:100%;
    max-width:430px;

    margin:auto;

    min-height:100vh;

    background:var(--surface);

    box-shadow:var(--shadow-md);

    position:relative;

    overflow:hidden;

    border:1px solid var(--border);

}

h1,h2,h3,h4,h5{

    font-weight:600;

}

small{

    color:var(--subtitle);

}

h1, h2, h3, h4, h5, h6, p, span, li, label, strong, div{

    color:inherit;

}