/* ============================================
   BASE STYLES - Reset e fundamentos
   ============================================ */

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

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background: var(--background);
    color: var(--foreground);
    min-height: 100vh;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}

/* ============================================
   ROLE-BASED VISIBILITY
   ============================================ */

/* Hidden class for role-based visibility */
.role-hidden {
    display: none !important;
}

/* Elements with data-role-min start hidden to prevent flicker */
[data-role-min] {
    /* Will be shown/hidden by JS based on user role */
}

.font-serif {
    font-family: 'Playfair Display', Georgia, serif;
}

.text-muted {
    color: var(--foreground-muted);
}

/* Focus states */
input:focus, textarea:focus, select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-glow);
}

/* Phosphor Icon sizing */
.ph {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    font-size: 20px;
    line-height: 1;
}
.icon-sm, .ph.icon-sm { font-size: 16px; }
.icon-md, .ph.icon-md { font-size: 20px; }
.icon-lg, .ph.icon-lg { font-size: 24px; }
.icon-xl, .ph.icon-xl { font-size: 32px; }
.icon-2xl, .ph.icon-2xl { font-size: 40px; }

/* Animations */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-8px); }
    75% { transform: translateX(8px); }
}

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

@keyframes livePulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.6; transform: scale(1.2); }
}

.animate-fadeIn { animation: fadeIn 0.3s ease; }
.animate-spin { animation: spin 1s linear infinite; }
.shake-animation { animation: shake 0.3s ease-in-out; }