/**
 * BASE.CSS - Fundamentos Mobile-First
 */

/* ===== RESET ===== */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ===== VARIÁVEIS ===== */
:root {
    /* Colors */
    --primary: #6366F1;
    --primary-dark: #4F46E5;
    --secondary: #10B981;
    --accent: #F59E0B;
    --error: #EF4444;

    /* Neutrals */
    --gray-50: #F9FAFB;
    --gray-100: #F3F4F6;
    --gray-200: #E5E7EB;
    --gray-300: #D1D5DB;
    --gray-400: #9CA3AF;
    --gray-500: #6B7280;
    --gray-600: #4B5563;
    --gray-700: #374151;
    --gray-800: #1F2937;
    --gray-900: #111827;

    /* Typography Mobile */
    --font-xs: 0.688rem;
    --font-sm: 0.813rem;
    --font-base: 0.938rem;
    --font-lg: 1.063rem;
    --font-xl: 1.25rem;
    --font-2xl: 1.5rem;
    --font-3xl: 1.875rem;

    /* Spacing */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-6: 1.5rem;
    --space-8: 2rem;

    /* Layout */
    --header-height: 56px;
    --bottom-nav-height: 64px;

    /* Effects */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);

    --radius-sm: 0.375rem;
    --radius: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-full: 9999px;

    --transition: 0.2s ease;
}

/* ===== BASE ===== */
html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
}

body {
    font-family: 'Roboto', -apple-system, sans-serif;
    font-size: var(--font-base);
    line-height: 1.5;
    color: var(--gray-900);
    background: var(--gray-50);
    padding-bottom: var(--bottom-nav-height);
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    line-height: 1.2;
}

h1 { font-size: var(--font-2xl); }
h2 { font-size: var(--font-xl); }
h3 { font-size: var(--font-lg); }

a {
    color: inherit;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

button {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

input, textarea, select, button {
    font-family: inherit;
}

/* ===== UTILITIES ===== */
.container {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 0 var(--space-4);
}

[x-cloak] {
    display: none !important;
}

/* ===== ANIMATIONS ===== */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ===== RESPONSIVE ===== */
@media (min-width: 640px) {
    :root {
        --font-base: 1rem;
        --font-lg: 1.125rem;
        --font-xl: 1.375rem;
        --font-2xl: 1.75rem;
    }
    .container { max-width: 640px; }
}

@media (min-width: 768px) {
    .container { max-width: 768px; }
}

@media (min-width: 1024px) {
    .container { max-width: 1024px; }
}

@media (min-width: 1280px) {
    .container { max-width: 1280px; }
}

/* Bloqueio total de scroll para Modais */
html.no-scroll, 
body.no-scroll {
    overflow: hidden !important;
    height: 100vh !important;
    touch-action: none; /* Bloqueia scroll tátil no mobile */
    padding-right: 15px; /* Evita que o site "pule" ao esconder a barra */
}