/* ============================================
   SHOPEE-ROOT.CSS - Variáveis Globais
   Padrão visual do sistema
   ============================================ */

:root {
    /* Cores principais */
    --shopee-orange: #ee4d2d;
    --shopee-orange-dark: #e2492b;
    --shopee-orange-light: #f05d40;
    --shopee-red: #d0011b;
    --shopee-blue: #066bc8;
    --shopee-green: #00bfa5;
    --shopee-yellow: #ffce3d;
    
    /* Tons de cinza */
    --shopee-gray-light: #f5f5f5;
    --shopee-gray: #9e9e9e;
    --shopee-gray-dark: #616161;
    
    /* Opacidades */
    --shopee-black: rgba(0,0,0,.87);
    --shopee-black-light: rgba(0,0,0,.54);
    --shopee-black-lighter: rgba(0,0,0,.26);
    --shopee-white: #fff;
    --shopee-border: rgba(0,0,0,.09);
    
    /* Sombras */
    --shopee-shadow: 0 1px 1px 0 rgba(0,0,0,.05);
    --shopee-shadow-large: 0 3px 10px 0 rgba(0,0,0,.14);
    
    /* Bordas */
    --border-radius: 2px;
    --border-radius-sm: 2px;
    
    /* Transições */
    --transition: all .1s cubic-bezier(.4,0,.6,1);
    
    /* Layout */
    --container-max-width: 1200px;
    --container-padding: 20px;
    --grid-gap: 10px;
}

/* Reset base */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, Helvetica Neue, Helvetica, Roboto, Droid Sans, Arial, sans-serif;
    color: var(--shopee-black);
    background: var(--shopee-gray-light);
    line-height: 1.2;
    font-size: .875rem;
    overflow-x: hidden;
}

.container {
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 0 var(--container-padding);
    width: 100%;
}

/* Utilitários */
.hidden {
    display: none !important;
}

.text-center {
    text-align: center;
}

.mt-20 { margin-top: 20px; }
.mb-20 { margin-bottom: 20px; }
.mt-40 { margin-top: 40px; }
.mb-40 { margin-bottom: 40px; }

/* Focus States */
:focus-visible {
    outline: 2px solid var(--shopee-orange);
    outline-offset: 2px;
}

button:focus-visible, a:focus-visible {
    outline: 2px solid var(--shopee-orange);
    outline-offset: 2px;
}

/* Badges */
.shopee-badge {
    display: inline-block;
    background: var(--shopee-orange);
    color: #fff;
    padding: 2px 4px;
    font-size: 10px;
    border-radius: 2px;
    margin-right: 4px;
}

.shopee-badge--green {
    background: var(--shopee-green);
}

.shopee-badge--blue {
    background: var(--shopee-blue);
}