/* ====================================================
   RECIFEMAIS CORE DESIGN SYSTEM
   Independence Layer - V1.1.0
   ==================================================== */

:root {
    /* =========================================
       TIPOGRAFIA (Inter - Única Fonte)
       ========================================= */
    --font-heading: 'Zona Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    /* Font Weights */
    --weight-light: 300;
    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;
    --weight-extrabold: 800;

    /* Fluid Typography (Mobile -> Desktop) */
    --text-h1: clamp(2rem, 5vw, 3.5rem);
    --text-h2: clamp(1.75rem, 4vw, 2.625rem);
    --text-h3: clamp(1.5rem, 3vw, 1.875rem);
    --text-h4: clamp(1.25rem, 2.5vw, 1.5rem);
    --text-h5: clamp(1.125rem, 2vw, 1.25rem);
    --text-h6: 1rem;
    --text-manchete: clamp(2rem, 6vw, 2.5rem);
    --text-lg: 1.125rem;
    --text-base: 1rem;
    --text-sm: 0.875rem;
    --text-xs: 0.75rem;

    /* Line Heights */
    --lh-tight: 1.1;
    --lh-snug: 1.3;
    --lh-normal: 1.5;
    --lh-relaxed: 1.6;

    /* Letter Spacing */
    --ls-tight: -0.03em;
    --ls-normal: -0.01em;
    --ls-wide: 0.05em;

    /* =========================================
       ESPAÇAMENTOS (Grid de 4px)
       ========================================= */
    --space-0: 0;
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-9: 2.5rem;
    --space-12: 3.5rem;
    --space-16: 4.5rem;

    /* =========================================
       PALETA DE CORES OFICIAL
       ========================================= */
    --rm-primary: #4E008E;
    --rm-purple: #4E008E;
    --rm-secondary: #E10098;
    --rm-pink: #E10098;
    --rm-accent: #FFB800;
    --rm-yellow: #FFB800;
    --rm-orange: #FF6B00;
    --rm-red: #DC143C;
    --rm-green: #228B22;
    --rm-blue: #0066CC;
    --rm-cyan: #00BCD4;

    /* Semantic Mappings */
    --rm-success: var(--rm-green);
    --rm-error: var(--rm-red);
    --rm-info: var(--rm-blue);
    --rm-warning: var(--rm-orange);

    /* Variantes de Cor para Hover */
    --rm-primary-light: #6B1AAF;
    --rm-primary-dark: #3A0068;

    /* =========================================
       ESCALA DE NEUTROS
       ========================================= */
    --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;

    /* Aliases Semânticos */
    --color-text-main: var(--gray-900);
    --color-text-muted: var(--gray-500);
    --color-text-secondary: var(--gray-600);
    --color-border: var(--gray-200);
    --color-bg: #FFFFFF;
    --color-bg-light: var(--gray-50);
    --color-bg-alt: #F8F9FA;

    /* =========================================
       CORES POR CPT
       ========================================= */
    --color-eventos: #4E008E;
    --color-lugar: #00BCD4;
    --color-artista: #E10098;
    --color-agremiacoes: #228B22;
    --color-roteiro: #FF6B00;
    --color-destino: #0066CC;
    --color-organizador: #4E008E;
    --color-atracao: #FFB800;
    --color-utilidade: #00BCD4;

    /* =========================================
       CORES POR CICLO FESTIVO
       ========================================= */
    --color-carnaval: #E10098;
    --color-sao-joao: #228B22;
    --color-natal: #DC143C;
    --color-reveillon: #0066CC;
    --color-verao: #FFB800;
    --ciclo-carnaval: var(--color-carnaval);

    /* =========================================
       CORES POR TIPO DE EVENTO
       ========================================= */
    --color-tipo-show: #4E008E;
    --color-tipo-festival: #E10098;
    --color-tipo-teatro: #DC143C;
    --color-tipo-exposicao: #0066CC;
    --color-tipo-baile: #E10098;
    --color-tipo-bloco: #228B22;

    /* =========================================
       CORES POR GÊNERO MUSICAL
       ========================================= */
    --color-genero-frevo: #E10098;
    --color-genero-forro: #228B22;
    --color-genero-mpb: #4E008E;
    --color-genero-maracatu: #E10098;
    --color-genero-axe: #FFB800;
    --color-genero-rock: #DC143C;
    --color-genero-samba: #FF6B00;
    --color-genero-reggae: #228B22;
    --color-genero-pop: #00BCD4;
    --color-genero-eletronica: #0066CC;

    /* =========================================
       GRADIENTES
       ========================================= */
    --gradient-primary: linear-gradient(180deg, #FFB800 0%, #FF6B00 100%);
    --gradient-primary-45: linear-gradient(45deg, #FFB800 0%, #FF6B00 100%);
    --gradient-red-orange: linear-gradient(180deg, #DC143C 0%, #FF6B00 100%);
    --gradient-blue-cyan: linear-gradient(180deg, #0066CC 0%, #00BCD4 100%);
    --gradient-purple-pink: linear-gradient(135deg, #4E008E 0%, #E10098 100%);
    --gradient-carnaval: linear-gradient(90deg, #E10098, #4E008E, #0066CC, #228B22, #FFB800);

    /* =========================================
       LAYOUT & BORDER RADIUS
       ========================================= */
    --container-width: 1280px;
    --header-height: 80px;

    --radius-xs: 3px;
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 6px;
    --radius-xl: 8px;
    --radius-pill: 9999px;

    /* =========================================
       SOMBRAS
       ========================================= */
    --shadow-none: none;
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.03);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.04);
    --shadow-lg: 0 4px 6px rgba(0, 0, 0, 0.04);
    --shadow-hover: 0 2px 8px rgba(0, 0, 0, 0.06);

    /* =========================================
       TRANSIÇÕES
       ========================================= */
    --transition-fast: 150ms ease-out;
    --transition-normal: 200ms ease-in-out;
    --transition-smooth: 300ms cubic-bezier(0.23, 1, 0.32, 1);

    /* =========================================
       ALIASES PARA COMPATIBILIDADE
       ========================================= */
    --primary: var(--rm-primary);
    --primary-light: var(--rm-primary-light);
    --primary-dark: var(--rm-primary-dark);
    --accent: var(--rm-accent);
    --accent-light: #FFD24D;
    --accent-dark: #E6A500;
    --gold: #D4AF37;
    --color-accent: var(--rm-primary);
    --color-accent-hover: var(--rm-primary-dark);
}

/* ====================================================
   BUTTONS (from buttons.css)
   ==================================================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-md);
    font-weight: var(--weight-semibold);
    font-size: var(--text-sm);
    line-height: 1.25;
    transition: all var(--transition-fast);
    cursor: pointer;
    border: 1px solid transparent;
    text-decoration: none;
    gap: 0.375rem;
}

.btn:active { opacity: 0.9; }

/* Primary */
.btn-primary { background-color: var(--rm-primary); color: white; }
.btn-primary:hover { background-color: var(--rm-primary-dark); color: white; }

/* Secondary */
.btn-secondary { background-color: var(--rm-secondary); color: white; }
.btn-secondary:hover { background-color: #c20082; color: white; }

/* Outline */
.btn-outline { background-color: transparent; border-color: var(--gray-300); color: var(--gray-700); }
.btn-outline:hover { border-color: var(--rm-primary); color: var(--rm-primary); background-color: transparent; }

/* Ghost */
.btn-ghost { background-color: transparent; border-color: transparent; color: var(--gray-600); }
.btn-ghost:hover { background-color: var(--gray-100); color: var(--gray-900); }

/* Link */
.btn-link { background-color: transparent; border-color: transparent; color: var(--rm-primary); padding: 0; text-decoration: underline; text-underline-offset: 2px; }
.btn-link:hover { color: var(--rm-primary-dark); }

/* Gradient */
.btn-gradient { background: var(--gradient-purple-pink); color: white; border: none; }
.btn-gradient:hover { opacity: 0.95; color: white; }

/* Button Sizes */
.btn-sm { padding: 0.375rem 0.75rem; font-size: 0.75rem; }
.btn-lg { padding: 0.75rem 1.5rem; font-size: 1rem; }

/* ====================================================
   UTILITY CLASSES (from utilities.css)
   ==================================================== */
.bg-brand-purple { background-color: var(--rm-purple); }
.border-brand-purple { border-color: var(--rm-purple); }
.text-brand-purple { color: var(--rm-purple); }

.bg-brand-pink { background-color: var(--rm-pink); }
.border-brand-pink { border-color: var(--rm-pink); }
.text-brand-pink { color: var(--rm-pink); }
.bg-brand-pink\/10 { background-color: rgba(225, 0, 152, 0.1); }

.bg-brand-cyan { background-color: var(--rm-cyan); }
.border-brand-cyan { border-color: var(--rm-cyan); }
.text-brand-cyan { color: var(--rm-cyan); }

.bg-brand-orange { background-color: var(--rm-orange); }
.border-brand-orange { border-color: var(--rm-orange); }
.text-brand-orange { color: var(--rm-orange); }

.bg-brand-primary { background-color: var(--rm-primary); }
.text-brand-primary { color: var(--rm-primary); }

.bg-brand-secondary { background-color: var(--rm-secondary); }
.text-brand-secondary { color: var(--rm-secondary); }

.bg-brand-accent { background-color: var(--rm-accent); }
.text-brand-accent { color: var(--rm-accent); }

.bg-brand-success { background-color: var(--rm-success); }
.text-brand-success { color: var(--rm-success); }

.bg-brand-error { background-color: var(--rm-error); }
.text-brand-error { color: var(--rm-error); }

.bg-brand-info { background-color: var(--rm-info); }
.text-brand-info { color: var(--rm-info); }

.bg-brand-warning { background-color: var(--rm-warning); }
.text-brand-warning { color: var(--rm-warning); }

/* ====================================================
   CORE TYPOGRAPHY
   ==================================================== */
body {
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: var(--weight-regular);
    line-height: var(--lh-relaxed);
    color: var(--gray-900);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6, .font-heading {
    font-family: var(--font-heading);
    font-weight: var(--weight-bold);
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-tight);
    color: var(--gray-900);
}

h1 { font-size: var(--text-h1); margin-bottom: var(--space-6); font-weight: var(--weight-extrabold); }
h2 { font-size: var(--text-h2); margin-bottom: var(--space-5); }
h3 { font-size: var(--text-h3); margin-bottom: var(--space-4); }
h4 { font-size: var(--text-h4); margin-bottom: var(--space-3); }
h5 { font-size: var(--text-h5); margin-bottom: var(--space-2); }
h6 { font-size: var(--text-h6); margin-bottom: var(--space-2); }

/* ====================================================
   COMPONENTS
   ==================================================== */

/* Badges */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-pill);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.badge-accent { background-color: var(--rm-yellow); color: var(--gray-900); }
.badge-outline { background-color: transparent; border: 1px solid var(--gray-300); color: var(--gray-600); }
.badge-carnaval { background-color: var(--rm-pink); color: white; }
.badge-primary { background-color: var(--rm-primary); color: white; }
.badge-success { background-color: var(--rm-success); color: white; }
.badge-error { background-color: var(--rm-error); color: white; }

/* Card Portal */
.card-portal {
    background: #fff;
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: border-color var(--transition-normal);
    border: 1px solid var(--gray-200);
    display: flex;
    flex-direction: column;
}

.card-portal:hover { border-color: var(--gray-300); }

.card-portal-image {
    position: relative;
    aspect-ratio: 16/9;
    overflow: hidden;
    background-color: var(--gray-100);
}

.card-portal-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.card-portal:hover .card-portal-image img { transform: scale(1.02); }

.card-portal-content {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.card-portal h3 {
    font-size: clamp(1.125rem, 3vw, 1.25rem);
    font-weight: var(--weight-bold);
    line-height: 1.3;
    margin-bottom: 0.5rem;
    color: var(--gray-900);
    transition: color var(--transition-fast);
}

.card-portal:hover h3 { color: var(--rm-primary); }

.card-portal p {
    font-size: var(--text-sm);
    color: var(--gray-600);
    line-height: 1.5;
    margin-bottom: 1rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Category Colors */
.category.cat-carnaval { color: var(--color-carnaval); }
.category.cat-sao-joao { color: var(--color-sao-joao); }
.category.cat-natal { color: var(--color-natal); }
.category.cat-reveillon { color: var(--color-reveillon); }
.category.cat-verao { color: var(--color-verao); }
.category.cat-gastronomia { color: var(--rm-yellow); }
.category.cat-vida-urbana { color: var(--rm-blue); }
.category.cat-cultura, .category.cat-cultura-e-lazer { color: var(--rm-pink); }
.category.cat-turismo { color: var(--rm-blue); }
.category.cat-turismo-destinos { color: var(--rm-cyan); }
.category.cat-novidades { color: var(--rm-primary); }
.category.cat-default { color: var(--rm-primary); }
.category.cat-sem-categoria { color: var(--color-text-secondary); }

/* CPT Colors */
.post-type-eventos .category { color: var(--color-eventos); }
.post-type-lugar .category { color: var(--color-lugar); }
.post-type-artista .category { color: var(--color-artista); }
.post-type-agremiacoes .category { color: var(--color-agremiacoes); }
.post-type-roteiro .category { color: var(--color-roteiro); }
.post-type-destino .category { color: var(--color-destino); }
.post-type-organizador .category { color: var(--color-organizador); }
.post-type-atracao .category { color: var(--color-atracao); }
.post-type-utilidade .category { color: var(--color-utilidade); }

/* Widgets */
.rm-widget {
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    background: #fff;
    box-shadow: var(--shadow-xs);
}

/* Utility Helpers */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.line-clamp-1 { -webkit-line-clamp: 1; line-clamp: 1; }
.line-clamp-2 { -webkit-line-clamp: 2; line-clamp: 2; }
.line-clamp-3 { -webkit-line-clamp: 3; line-clamp: 3; }