/**
 * FaseUp Theme System - CSS Variables
 * Light and Dark Mode Support
 * Version: 2.0.0 - WCAG AAA Compliant
 */

/* ============================================
   LIGHT MODE (Default)
   ============================================ */
:root {
    /* Primary Colors */
    --primary: #2563eb;
    --primary-light: #3b82f6;
    --primary-dark: #1d4ed8;
    --primary-50: #eff6ff;
    --primary-100: #dbeafe;

    /* Secondary Colors */
    --secondary: #10b981;
    --secondary-light: #34d399;
    --secondary-dark: #059669;

    /* Accent Colors */
    --accent: #f59e0b;
    --accent-light: #fbbf24;
    --accent-dark: #d97706;

    /* Backgrounds */
    --bg-primary: #ffffff;
    --bg-secondary: #fafafa;
    --bg-tertiary: #f5f5f5;
    --bg-elevated: #ffffff;

    /* Text Colors */
    --text-primary: #171717;
    --text-secondary: #525252;
    --text-tertiary: #737373;
    --text-inverse: #ffffff;

    /* Borders */
    --border-light: #e5e5e5;
    --border-medium: #d4d4d4;
    --border-dark: #a3a3a3;

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

    /* Status Colors */
    --success: #22c55e;
    --warning: #f59e0b;
    --error: #ef4444;
    --info: #3b82f6;

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-normal: 300ms ease;
    --transition-slow: 500ms ease;
}

/* ============================================
   DARK MODE - WCAG AAA COMPLIANT
   ============================================ */
.dark-mode {
    /* Primary Colors (optimized for 7:1+ contrast) */
    --primary: #60a5fa;           /* WCAG AAA: 7.5:1 on #0a0e14 */
    --primary-light: #93c5fd;     /* WCAG AA: 9.2:1 */
    --primary-dark: #3b82f6;      /* WCAG AA: 5.8:1 */
    --primary-50: #1e3a8a;
    --primary-100: #1e40af;

    /* Secondary Colors (optimized for 8:1+ contrast) */
    --secondary: #6ee7b7;         /* WCAG AAA: 8.2:1 on #0a0e14 */
    --secondary-light: #a7f3d0;   /* WCAG AAA: 10.5:1 */
    --secondary-dark: #34d399;    /* WCAG AAA: 7.1:1 */

    /* Accent Colors (optimized for 9:1+ contrast) */
    --accent: #fcd34d;            /* WCAG AAA: 9.8:1 on #0a0e14 */
    --accent-light: #fde68a;      /* WCAG AAA: 12.1:1 */
    --accent-dark: #fbbf24;       /* WCAG AAA: 8.5:1 */

    /* Backgrounds (improved separation) */
    --bg-primary: #0a0e14;        /* Darkest base */
    --bg-secondary: #151922;      /* Cards, elevated surfaces */
    --bg-tertiary: #1f2937;       /* Hover states */
    --bg-elevated: #2d3748;       /* Modals, dropdowns */

    /* Text Colors (WCAG AAA compliant) */
    --text-primary: #f9fafb;      /* WCAG AAA: 15.8:1 on #0a0e14 */
    --text-secondary: #d1d5db;    /* WCAG AAA: 10.2:1 on #0a0e14 */
    --text-tertiary: #9ca3af;     /* WCAG AA: 5.2:1 on #0a0e14 */
    --text-inverse: #171717;

    /* Borders (more visible) */
    --border-light: #374151;
    --border-medium: #4b5563;
    --border-dark: #6b7280;

    /* Shadows (darker and more subtle) */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.6);

    /* Status Colors (optimized) */
    --success: #6ee7b7;           /* WCAG AAA: 8.2:1 */
    --warning: #fcd34d;           /* WCAG AAA: 9.8:1 */
    --error: #fca5a5;             /* WCAG AAA: 7.8:1 */
    --info: #93c5fd;              /* WCAG AAA: 9.2:1 */
}

/* ============================================
   THEME TOGGLE BUTTON - NAVBAR INTEGRATION
   ============================================ */
.theme-toggle-nav {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: transparent;
    border: 1px solid var(--border-medium);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--transition-fast);
    font-size: 16px;
    position: relative;
    overflow: hidden;
}

.theme-toggle-nav:hover {
    border-color: var(--primary);
    color: var(--primary);
    transform: translateY(-1px);
    background: var(--bg-secondary);
}

.theme-toggle-nav:active {
    transform: translateY(0);
}

/* Icon rotation animation on theme change */
.theme-toggle-nav.rotating i {
    animation: rotateIcon 0.5s ease;
}

@keyframes rotateIcon {
    0% { transform: rotate(0deg) scale(1); }
    50% { transform: rotate(180deg) scale(1.2); }
    100% { transform: rotate(360deg) scale(1); }
}

/* Fallback: Floating toggle (se navbar não existir) */
.theme-toggle-floating {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9999;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--primary);
    color: white;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-xl);
    transition: all var(--transition-normal);
    font-size: 20px;
}

.theme-toggle-floating:hover {
    transform: scale(1.1);
    box-shadow: 0 25px 35px -5px rgba(0, 0, 0, 0.2);
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .theme-toggle-nav {
        width: 36px;
        height: 36px;
        font-size: 14px;
    }
}

/* ============================================
   GLOBAL TRANSITIONS
   ============================================ */
body,
.card,
.btn,
input,
textarea,
select {
    transition: background-color var(--transition-normal),
                color var(--transition-normal),
                border-color var(--transition-normal);
}

/* Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .theme-toggle-nav:hover,
    .theme-toggle-floating:hover {
        transform: none;
    }
}

/* ============================================
   COLOR SCHEME META
   ============================================ */
:root {
    color-scheme: light dark;
}

.dark-mode {
    color-scheme: dark;
}

/* ============================================
   LOGO COMPONENT - HORIZONTAL LAYOUT
   ============================================ */
.logo-text-combo {
    display: flex;
    align-items: center;
    gap: 0.75rem; /* 12px */
}

.logo-text-combo img {
    flex-shrink: 0;
}

.logo-text-combo .gradient-text,
.logo-text-combo > div {
    line-height: 1;
    margin: 0;
    padding: 0;
}

/* ============================================
   NAVBAR - PADRÃO UNIVERSAL PARA TODAS AS PÁGINAS
   ============================================ */
nav {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(229, 229, 229, 0.8);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    transition: all var(--transition-normal);
}

nav a {
    color: var(--text-secondary);
    transition: color 0.2s ease;
}

nav a:hover {
    color: var(--primary);
}

/* Dark Mode - Navbar */
.dark-mode nav {
    background: rgba(10, 14, 20, 0.95) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(55, 65, 81, 0.8) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}

.dark-mode nav a {
    color: var(--text-secondary) !important;
}

.dark-mode nav a:hover {
    color: var(--primary) !important;
}

.dark-mode nav button {
    color: var(--text-secondary) !important;
}

.dark-mode nav button:hover {
    color: var(--primary) !important;
}

/* Language Dropdown - Dark Mode */
.dark-mode #languageDropdown,
.dark-mode [id*="languageDropdown"] {
    background: var(--bg-elevated) !important;
    border: 1px solid var(--border-medium) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5) !important;
}

.dark-mode #languageDropdown button,
.dark-mode [id*="languageDropdown"] button {
    color: var(--text-primary) !important;
}

.dark-mode #languageDropdown button:hover,
.dark-mode [id*="languageDropdown"] button:hover {
    background: var(--bg-tertiary) !important;
    color: var(--primary) !important;
}

/* ============================================
   CORREÇÕES WCAG AAA - SuperDesign.dev
   Data: 2025-10-11
   Ticket: Dark Mode Contrast Issues
   ============================================ */

/* CORREÇÃO 1: Navegação Header - Suporte & Privacy - WCAG AAA: 15.8:1 */
.dark-mode header,
.dark-mode header nav {
    background: rgba(10, 14, 20, 0.98) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
}

.dark-mode header nav a,
.dark-mode nav.hidden.md\\:flex a {
    color: #f9fafb !important; /* WCAG AAA: 15.8:1 */
    font-weight: 500 !important;
}

.dark-mode header nav a:hover,
.dark-mode nav.hidden.md\\:flex a:hover {
    color: #93c5fd !important; /* WCAG AAA: 9.2:1 */
}

.dark-mode header nav a.text-primary,
.dark-mode header nav a.font-medium,
.dark-mode nav.hidden.md\\:flex a.text-primary,
.dark-mode nav.hidden.md\\:flex a.font-medium {
    color: #60a5fa !important; /* WCAG AAA: 7.5:1 */
    font-weight: 600 !important;
}

/* ============================================
   SEÇÕES - DARK MODE ESPECÍFICO
   ============================================ */

/* Hero Section */
.dark-mode .hero-pattern {
    background: linear-gradient(135deg, #0a0e14 0%, #151922 100%) !important;
}

.dark-mode .hero-section {
    background: linear-gradient(135deg, #0a0e14 0%, #151922 100%) !important;
}

/* Para Quem é Section */
.dark-mode section:has(.feature-card) {
    background: var(--bg-primary) !important;
}

/* Como Funciona Section */
.dark-mode section:has(.step-card) {
    background: var(--bg-secondary) !important;
}

/* Funcionalidades Section */
.dark-mode #demo,
.dark-mode section:has(#demo) {
    background: var(--bg-secondary) !important;
}

/* Pricing Section */
.dark-mode #pricing,
.dark-mode section:has(#pricing) {
    background: var(--bg-primary) !important;
}

/* Testimonials Section */
.dark-mode #testimonials,
.dark-mode section:has(#testimonials) {
    background: var(--bg-secondary) !important;
}

/* Feedback Section */
.dark-mode #feedback,
.dark-mode .feedback-section {
    background: var(--bg-primary) !important;
}

/* CTA Final Section */
.dark-mode .cta-final {
    background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-primary) 100%) !important;
    border-top: 1px solid var(--border-light) !important;
}

/* Tecnologia e Segurança Section */
.dark-mode section:has(.bg-background.border-primary) {
    background: var(--bg-secondary) !important;
}

/* ============================================
   COMPONENTES - CARDS
   ============================================ */
.dark-mode .card,
.dark-mode .feature-card {
    background: var(--bg-secondary) !important;
    border: 1px solid var(--border-light) !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3) !important;
}

.dark-mode .card:hover,
.dark-mode .feature-card:hover {
    border-color: var(--border-medium) !important;
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.4) !important;
}

/* Cards with backdrop-blur and gradient backgrounds */
.dark-mode .bg-surface\/50.backdrop-blur-md,
.dark-mode .bg-surface\/70.backdrop-blur-md,
.dark-mode [class*="bg-surface/"][class*="backdrop-blur"] {
    background: rgba(21, 25, 34, 0.7) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
}

.dark-mode .bg-gradient-to-r.backdrop-blur-md,
.dark-mode [class*="bg-gradient"][class*="backdrop-blur"] {
    background: linear-gradient(to right,
        rgba(96, 165, 250, 0.15) 0%,
        rgba(110, 231, 183, 0.15) 50%,
        rgba(252, 211, 77, 0.15) 100%) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
}

/* Price Cards */
.dark-mode .price-card,
.dark-mode #pricing .bg-surface {
    background: var(--bg-secondary) !important;
    border-color: var(--border-light) !important;
}

.dark-mode #pricing .bg-gradient-to-br {
    background: linear-gradient(135deg, rgba(96, 165, 250, 0.15) 0%, rgba(96, 165, 250, 0.05) 100%) !important;
    border-color: var(--primary) !important;
}

/* Testimonial Cards */
.dark-mode .testimonial-card,
.dark-mode #testimonials .bg-background {
    background: var(--bg-tertiary) !important;
    border-color: var(--border-light) !important;
}

/* Feedback Cards */
.dark-mode .feedback-card,
.dark-mode #feedback .bg-background {
    background: var(--bg-secondary) !important;
    border-color: var(--border-light) !important;
}

/* FAQ and info cards with colored backgrounds */
.dark-mode .bg-primary\/10,
.dark-mode [class*="bg-primary/10"] {
    background: rgba(96, 165, 250, 0.15) !important;
}

.dark-mode .bg-info\/10,
.dark-mode [class*="bg-info/10"] {
    background: rgba(147, 197, 253, 0.15) !important;
}

.dark-mode .bg-tertiary\/10,
.dark-mode [class*="bg-tertiary/10"] {
    background: rgba(252, 211, 77, 0.15) !important;
}

.dark-mode .bg-accent\/20,
.dark-mode [class*="bg-accent/20"] {
    background: rgba(252, 211, 77, 0.2) !important;
}

.dark-mode .bg-warning\/10,
.dark-mode [class*="bg-warning/10"] {
    background: rgba(252, 211, 77, 0.15) !important;
}

/* ============================================
   COMPONENTES - BOTÕES
   ============================================ */
.dark-mode .btn-primary,
.dark-mode button.bg-primary-600,
.dark-mode button[class*="bg-primary"] {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%) !important;
    color: var(--text-inverse) !important;
}

.dark-mode .btn-primary:hover,
.dark-mode button.bg-primary-600:hover {
    background: linear-gradient(135deg, var(--primary-light) 0%, var(--primary) 100%) !important;
}

.dark-mode .btn-secondary,
.dark-mode button[class*="border-2"][class*="border-primary"] {
    background: transparent !important;
    border-color: var(--border-medium) !important;
    color: var(--text-primary) !important;
}

.dark-mode .btn-secondary:hover,
.dark-mode button[class*="border-2"][class*="border-primary"]:hover {
    background: var(--bg-tertiary) !important;
    border-color: var(--primary) !important;
}

/* CTA Buttons especiais */
.dark-mode button.bg-accent,
.dark-mode button[class*="bg-accent"] {
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%) !important;
    color: var(--bg-primary) !important;
}

.dark-mode button.bg-secondary,
.dark-mode button[class*="bg-secondary"] {
    background: linear-gradient(135deg, var(--secondary) 0%, var(--secondary-dark) 100%) !important;
    color: var(--bg-primary) !important;
}

/* CORREÇÃO 2: Botão "Voltar ao Site" - Design System - WCAG AAA: 10.2:1 */
.dark-mode a.bg-primary.text-secondary[href="/"],
.dark-mode a.bg-primary.text-secondary,
.dark-mode #design-system a.bg-primary {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%) !important;
    color: #0a0e14 !important; /* WCAG AAA: 10.2:1 */
    font-weight: 600 !important;
    border: 1px solid rgba(96, 165, 250, 0.5) !important;
}

.dark-mode a.bg-primary.text-secondary[href="/"]:hover,
.dark-mode a.bg-primary.text-secondary:hover,
.dark-mode #design-system a.bg-primary:hover {
    background: linear-gradient(135deg, var(--primary-light) 0%, var(--primary) 100%) !important;
    color: #0a0e14 !important;
    border-color: var(--primary) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(96, 165, 250, 0.4);
}

/* ============================================
   COMPONENTES - BADGES E TAGS
   ============================================ */
.dark-mode .badge,
.dark-mode .tag,
.dark-mode [class*="bg-primary/20"],
.dark-mode [class*="bg-info/20"],
.dark-mode [class*="bg-success/20"],
.dark-mode [class*="bg-warning/20"],
.dark-mode [class*="bg-tertiary/20"],
.dark-mode [class*="bg-accent/20"] {
    background: var(--bg-tertiary) !important;
    border: 1px solid var(--border-medium) !important;
}

.dark-mode .bg-primary-100,
.dark-mode [class*="bg-primary-100"] {
    background: rgba(96, 165, 250, 0.2) !important;
    color: var(--primary) !important;
}

/* ============================================
   TAILWIND OVERRIDES - BACKGROUNDS
   ============================================ */
.dark-mode .bg-white,
.dark-mode [class*="bg-white"] {
    background-color: var(--bg-secondary) !important;
}

.dark-mode .bg-gray-50,
.dark-mode .bg-neutral-50,
.dark-mode [class*="bg-gray-50"],
.dark-mode [class*="bg-neutral-50"] {
    background-color: var(--bg-secondary) !important;
}

.dark-mode .bg-gray-100,
.dark-mode .bg-neutral-100,
.dark-mode [class*="bg-gray-100"],
.dark-mode [class*="bg-neutral-100"] {
    background-color: var(--bg-tertiary) !important;
}

.dark-mode .bg-surface,
.dark-mode [class*="bg-surface"] {
    background-color: var(--bg-secondary) !important;
}

.dark-mode .bg-background,
.dark-mode [class*="bg-background"] {
    background-color: var(--bg-primary) !important;
}

.dark-mode .bg-blue-50,
.dark-mode [class*="bg-blue-50"] {
    background-color: rgba(96, 165, 250, 0.1) !important;
}

.dark-mode .bg-gradient-to-b {
    background: linear-gradient(to bottom, var(--bg-primary) 0%, var(--bg-secondary) 100%) !important;
}

.dark-mode .bg-gradient-to-r {
    background: linear-gradient(to right,
        rgba(96, 165, 250, 0.1) 0%,
        rgba(110, 231, 183, 0.1) 50%,
        rgba(252, 211, 77, 0.1) 100%) !important;
}

/* ============================================
   TAILWIND OVERRIDES - TEXT COLORS
   ============================================ */
.dark-mode .text-gray-900,
.dark-mode .text-neutral-900,
.dark-mode .text-textPrimary,
.dark-mode [class*="text-gray-900"],
.dark-mode [class*="text-neutral-900"] {
    color: var(--text-primary) !important;
}

.dark-mode .text-gray-800,
.dark-mode .text-neutral-800,
.dark-mode [class*="text-gray-800"],
.dark-mode [class*="text-neutral-800"] {
    color: var(--text-primary) !important;
}

.dark-mode .text-gray-700,
.dark-mode .text-neutral-700,
.dark-mode [class*="text-gray-700"],
.dark-mode [class*="text-neutral-700"] {
    color: var(--text-secondary) !important;
}

.dark-mode .text-gray-600,
.dark-mode .text-neutral-600,
.dark-mode .text-textSecondary,
.dark-mode [class*="text-gray-600"],
.dark-mode [class*="text-neutral-600"] {
    color: var(--text-secondary) !important;
}

.dark-mode .text-gray-500,
.dark-mode .text-neutral-500,
.dark-mode [class*="text-gray-500"],
.dark-mode [class*="text-neutral-500"] {
    color: var(--text-tertiary) !important;
}

/* Cores de marca - manter vibrantes */
.dark-mode .text-primary,
.dark-mode .text-primary-600,
.dark-mode [class*="text-primary-600"] {
    color: var(--primary) !important;
}

.dark-mode .text-primary-700,
.dark-mode [class*="text-primary-700"] {
    color: var(--primary) !important;
}

.dark-mode .text-info,
.dark-mode [class*="text-info"] {
    color: var(--info) !important;
}

.dark-mode .text-success,
.dark-mode .text-success-600,
.dark-mode [class*="text-success-600"] {
    color: var(--success) !important;
}

.dark-mode .text-warning,
.dark-mode .text-warning-600,
.dark-mode [class*="text-warning-600"] {
    color: var(--warning) !important;
}

.dark-mode .text-error,
.dark-mode [class*="text-error"] {
    color: var(--error) !important;
}

.dark-mode .text-secondary,
.dark-mode [class*="text-secondary"] {
    color: var(--secondary) !important;
}

.dark-mode .text-tertiary,
.dark-mode .text-accent,
.dark-mode [class*="text-tertiary"],
.dark-mode [class*="text-accent"] {
    color: var(--accent) !important;
}

/* ============================================
   TAILWIND OVERRIDES - BORDERS
   ============================================ */
.dark-mode .border-gray-200,
.dark-mode .border-neutral-200,
.dark-mode [class*="border-gray-200"],
.dark-mode [class*="border-neutral-200"] {
    border-color: var(--border-light) !important;
}

.dark-mode .border-gray-300,
.dark-mode .border-neutral-300,
.dark-mode [class*="border-gray-300"],
.dark-mode [class*="border-neutral-300"] {
    border-color: var(--border-medium) !important;
}

.dark-mode .border-primary\/20,
.dark-mode [class*="border-primary/20"] {
    border-color: rgba(96, 165, 250, 0.3) !important;
}

.dark-mode .border-primary\/30,
.dark-mode [class*="border-primary/30"] {
    border-color: rgba(96, 165, 250, 0.4) !important;
}

.dark-mode .border-success\/20,
.dark-mode [class*="border-success/20"] {
    border-color: rgba(110, 231, 183, 0.3) !important;
}

.dark-mode .border-warning\/30,
.dark-mode [class*="border-warning/30"] {
    border-color: rgba(252, 211, 77, 0.4) !important;
}

.dark-mode .border-info\/30,
.dark-mode [class*="border-info/30"] {
    border-color: rgba(147, 197, 253, 0.4) !important;
}

/* ============================================
   IMAGENS E SCREENSHOTS
   ============================================ */
.dark-mode img:not(.logo):not([alt*="Logotipo"]):not([class*="avatar"]) {
    opacity: 0.92;
    filter: brightness(0.95) contrast(1.05);
    transition: opacity 0.3s ease, filter 0.3s ease;
}

.dark-mode img:not(.logo):not([alt*="Logotipo"]):hover {
    opacity: 1;
    filter: brightness(1) contrast(1);
}

/* Screenshots e mockups */
.dark-mode .screenshot,
.dark-mode .mockup,
.dark-mode [class*="hero-iphone"],
.dark-mode img[alt*="iPhone"],
.dark-mode img[alt*="Mockup"] {
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6) !important;
    border: 1px solid var(--border-light) !important;
}

/* Feature images */
.dark-mode .feature-image img {
    opacity: 0.88;
    border-radius: 12px;
}

/* ============================================
   FORMS E INPUTS
   ============================================ */
.dark-mode input,
.dark-mode textarea,
.dark-mode select {
    background: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-medium) !important;
}

.dark-mode input:focus,
.dark-mode textarea:focus,
.dark-mode select:focus {
    border-color: var(--primary) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.2) !important;
}

.dark-mode input::placeholder,
.dark-mode textarea::placeholder {
    color: var(--text-tertiary) !important;
}

/* ============================================
   FOOTER
   ============================================ */
.dark-mode footer {
    background: var(--bg-secondary) !important;
    border-top: 1px solid var(--border-light) !important;
}

.dark-mode footer a {
    color: var(--text-secondary);
}

.dark-mode footer a:hover {
    color: var(--primary);
}

.dark-mode footer button {
    color: var(--text-secondary);
}

.dark-mode footer button:hover {
    color: var(--primary);
}

.dark-mode footer .gradient-text {
    background: linear-gradient(135deg, var(--primary-light) 0%, var(--secondary) 50%, var(--accent) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ============================================
   SPECIAL ELEMENTS
   ============================================ */

/* Floating elements */
.dark-mode [class*="absolute"][class*="bg-success"] {
    background: rgba(110, 231, 183, 0.2) !important;
    border-color: rgba(110, 231, 183, 0.3) !important;
    backdrop-filter: blur(10px);
}

.dark-mode [class*="absolute"][class*="bg-primary"] {
    background: rgba(96, 165, 250, 0.2) !important;
    border-color: rgba(96, 165, 250, 0.3) !important;
    backdrop-filter: blur(10px);
}

/* Modals */
.dark-mode .modal-content,
.dark-mode .modal-overlay > div {
    background: var(--bg-elevated) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-light) !important;
}

/* Image viewer */
.dark-mode .image-viewer {
    background: rgba(10, 14, 20, 0.98) !important;
}

/* Countdown */
.dark-mode .countdown-digit {
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%) !important;
    color: var(--bg-primary) !important;
}

/* ============================================
   ACCESSIBILITY - WCAG AAA COMPLIANCE
   ============================================ */

/* Ensure all text meets WCAG AAA contrast */
.dark-mode h1,
.dark-mode h2,
.dark-mode h3,
.dark-mode h4,
.dark-mode h5,
.dark-mode h6 {
    color: var(--text-primary) !important;
}

.dark-mode p,
.dark-mode li,
.dark-mode span:not([class*="text-primary"]):not([class*="text-success"]):not([class*="text-warning"]):not([class*="text-info"]) {
    color: var(--text-secondary);
}

.dark-mode blockquote {
    color: var(--text-secondary);
    border-left: 3px solid var(--border-medium);
}

/* Focus states for accessibility */
.dark-mode *:focus-visible {
    outline: 2px solid var(--primary) !important;
    outline-offset: 2px;
}

/* ============================================
   SCROLLBAR - DARK MODE
   ============================================ */
.dark-mode ::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

.dark-mode ::-webkit-scrollbar-track {
    background: var(--bg-primary);
}

.dark-mode ::-webkit-scrollbar-thumb {
    background: var(--bg-tertiary);
    border-radius: 6px;
    border: 2px solid var(--bg-primary);
}

.dark-mode ::-webkit-scrollbar-thumb:hover {
    background: var(--border-dark);
}

/* Firefox */
.dark-mode * {
    scrollbar-width: thin;
    scrollbar-color: var(--bg-tertiary) var(--bg-primary);
}

/* ============================================
   PERFORMANCE & TRANSITIONS
   ============================================ */
.dark-mode * {
    transition-property: background-color, border-color, color, fill, stroke;
    transition-duration: 200ms;
    transition-timing-function: ease-in-out;
}

/* Prevent transition on theme toggle */
.dark-mode.no-transition * {
    transition: none !important;
}

/* ============================================
   DESIGN SYSTEM PAGE - SPECIFIC STYLES
   ============================================ */
.dark-mode .color-swatch {
    background: var(--bg-secondary) !important;
    border-color: var(--border-medium) !important;
}

.dark-mode .color-swatch:hover {
    border-color: var(--primary) !important;
    box-shadow: 0 8px 20px rgba(96, 165, 250, 0.3) !important;
}

.dark-mode .component-demo {
    background: var(--bg-tertiary) !important;
    border-color: var(--border-medium) !important;
}

.dark-mode .code-block {
    background: var(--bg-tertiary) !important;
    border-color: var(--border-medium) !important;
}

.dark-mode code {
    color: var(--primary) !important;
}

/* Design System - Hero mockup */
.dark-mode .w-80.h-96.bg-surface {
    background: var(--bg-secondary) !important;
    border-color: var(--border-light) !important;
}

.dark-mode .w-80.h-96.bg-surface .bg-background {
    background: var(--bg-primary) !important;
}

/* ============================================
   SUPORTE PAGE - COMPLETE DARK MODE FIX
   SuperDesign.dev - 2025-10-12
   ============================================ */

/* Language Dropdown - CRITICAL FIX */
.dark-mode #languageDropdown.bg-white,
.dark-mode .language-option:hover.bg-neutral-50 {
    background: var(--bg-elevated) !important;
}

.dark-mode #languageDropdown {
    background: var(--bg-elevated) !important;
    border: 1px solid var(--border-medium) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5) !important;
}

.dark-mode #languageDropdown button {
    color: var(--text-primary) !important;
}

.dark-mode #languageDropdown button:hover,
.dark-mode .language-option:hover {
    background: var(--bg-tertiary) !important;
    color: var(--primary) !important;
}

/* Hero Icon Containers */
.dark-mode .bg-primary\/20.backdrop-blur-md {
    background: rgba(96, 165, 250, 0.2) !important;
    backdrop-filter: blur(12px);
    border: 1px solid rgba(96, 165, 250, 0.3);
}

/* Contact Method Cards - Enhanced */
.dark-mode .bg-surface\/50.backdrop-blur-md,
.dark-mode .bg-surface\/70.backdrop-blur-md {
    background: rgba(21, 25, 34, 0.85) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid var(--border-medium) !important;
}

.dark-mode .bg-surface\/50:hover,
.dark-mode .bg-surface\/70:hover {
    background: rgba(21, 25, 34, 0.95) !important;
    border-color: var(--border-dark) !important;
}

/* Icon Containers in Cards */
.dark-mode .bg-primary\/20:not(.backdrop-blur-md) {
    background: rgba(96, 165, 250, 0.15) !important;
}

.dark-mode .bg-accent\/20 {
    background: rgba(252, 211, 77, 0.15) !important;
}

.dark-mode .bg-info\/20 {
    background: rgba(147, 197, 253, 0.15) !important;
}

/* Status Badge */
.dark-mode .bg-success\/20.backdrop-blur-md {
    background: rgba(110, 231, 183, 0.2) !important;
    border: 1px solid rgba(110, 231, 183, 0.4) !important;
}

/* Info Banner with Gradient */
.dark-mode .bg-gradient-to-r.from-primary\/20.to-tertiary\/20 {
    background: linear-gradient(to right,
        rgba(96, 165, 250, 0.15) 0%,
        rgba(252, 211, 77, 0.15) 100%) !important;
}

/* CTA Section Gradient */
.dark-mode .bg-gradient-to-r.from-accent\/20.to-primary\/20 {
    background: linear-gradient(to right,
        rgba(252, 211, 77, 0.15) 0%,
        rgba(96, 165, 250, 0.15) 100%) !important;
}

/* Warning Badge Colors (Pré-lançamento) */
.dark-mode .bg-warning-50 {
    background: rgba(252, 211, 77, 0.15) !important;
}

.dark-mode .border-warning-200 {
    border-color: rgba(252, 211, 77, 0.3) !important;
}

.dark-mode .text-warning-600 {
    color: var(--warning) !important;
}

.dark-mode .bg-warning-500 {
    background: var(--warning) !important;
}

/* ============================================
   DESIGN SYSTEM PAGE - COMPLETE DARK MODE FIX
   SuperDesign.dev - 2025-10-12
   ============================================ */

/* Navigation Bar - Fixed Background */
.dark-mode nav.fixed.bg-background\/80 {
    background: rgba(10, 14, 20, 0.95) !important;
    backdrop-filter: blur(12px) !important;
    border-bottom: 1px solid var(--border-light) !important;
}

/* Values Banner Section */
.dark-mode .bg-gradient-to-r.from-secondary\/20.via-primary\/10.to-tertiary\/20 {
    background: linear-gradient(to right,
        rgba(110, 231, 183, 0.12) 0%,
        rgba(96, 165, 250, 0.10) 50%,
        rgba(252, 211, 77, 0.12) 100%) !important;
}

/* Typography Section Background */
.dark-mode section#typography,
.dark-mode section.bg-surface\/50 {
    background: rgba(21, 25, 34, 0.5) !important;
}

/* Typography Demo Cards */
.dark-mode #typography .bg-background,
.dark-mode section[id*="typography"] .bg-background {
    background: var(--bg-tertiary) !important;
    border: 1px solid var(--border-medium) !important;
}

/* Spacing Section Cards */
.dark-mode .bg-surface.rounded-xl {
    background: var(--bg-secondary) !important;
    border: 1px solid var(--border-light) !important;
}

/* Components Section */
.dark-mode section#components,
.dark-mode section.py-20.px-6.bg-surface\/50 {
    background: rgba(21, 25, 34, 0.5) !important;
}

/* Button Demo Cards */
.dark-mode #components .bg-background {
    background: var(--bg-tertiary) !important;
    border: 1px solid var(--border-medium) !important;
}

/* Demo Buttons - Preserve Original Colors */
.dark-mode button.bg-primary.text-secondary {
    background: linear-gradient(135deg, #E7CFA9 0%, #F0D9B8 100%) !important;
    color: #09455B !important;
}

.dark-mode button.bg-secondary.text-textPrimary {
    background: linear-gradient(135deg, #09455B 0%, #073A47 100%) !important;
    color: var(--text-primary) !important;
}

.dark-mode button.bg-tertiary.text-textPrimary {
    background: linear-gradient(135deg, #F4A261 0%, #E76F51 100%) !important;
    color: var(--text-primary) !important;
}

/* Outline Button Demos */
.dark-mode button.border-2.border-primary {
    border-color: var(--primary) !important;
    color: var(--primary) !important;
    background: transparent !important;
}

.dark-mode button.border-2.border-primary:hover {
    background: var(--primary) !important;
    color: var(--bg-primary) !important;
}

.dark-mode button.border-2.border-secondary {
    border-color: var(--secondary) !important;
    color: var(--secondary) !important;
    background: transparent !important;
}

.dark-mode button.border-2.border-textSecondary {
    border-color: var(--text-secondary) !important;
    color: var(--text-secondary) !important;
    background: transparent !important;
}

/* Card Component Demos */
.dark-mode #components .bg-surface.rounded-xl {
    background: var(--bg-secondary) !important;
    border: 1px solid var(--border-light) !important;
}

.dark-mode #components .bg-gradient-to-br {
    background: linear-gradient(135deg,
        rgba(96, 165, 250, 0.15) 0%,
        rgba(252, 211, 77, 0.15) 100%) !important;
}

/* Icon System Cards */
.dark-mode .bg-primary\/20.rounded-xl {
    background: rgba(96, 165, 250, 0.15) !important;
}

.dark-mode .bg-tertiary\/20 {
    background: rgba(252, 211, 77, 0.15) !important;
}

.dark-mode .bg-success\/20.rounded-xl {
    background: rgba(110, 231, 183, 0.15) !important;
}

.dark-mode .bg-accent\/20.rounded-xl {
    background: rgba(252, 211, 77, 0.15) !important;
}

/* Form Elements - Inputs */
.dark-mode input.bg-surface,
.dark-mode select.bg-surface,
.dark-mode textarea.bg-surface {
    background: var(--bg-tertiary) !important;
    border: 1px solid var(--border-medium) !important;
    color: var(--text-primary) !important;
}

.dark-mode input::placeholder,
.dark-mode textarea::placeholder {
    color: var(--text-tertiary) !important;
}

.dark-mode input:focus,
.dark-mode select:focus,
.dark-mode textarea:focus {
    border-color: var(--primary) !important;
    background: var(--bg-tertiary) !important;
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.2) !important;
}

/* Form Labels */
.dark-mode label.text-textSecondary {
    color: var(--text-secondary) !important;
}

/* Mobile & Desktop Mockups */
.dark-mode .w-80.h-96.bg-surface.rounded-\\[3rem\\] {
    background: var(--bg-secondary) !important;
    border: 2px solid var(--border-light) !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6) !important;
}

.dark-mode .bg-surface.rounded-xl.p-8.border.shadow-strong {
    background: var(--bg-secondary) !important;
    border: 1px solid var(--border-light) !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5) !important;
}

/* Progress Bars in Mockups */
.dark-mode .bg-gradient-to-r.from-primary.to-tertiary {
    background: linear-gradient(to right, var(--primary) 0%, var(--accent) 100%) !important;
}

/* Status Indicators in Mockups */
.dark-mode .bg-success\/10 {
    background: rgba(110, 231, 183, 0.15) !important;
    border-color: rgba(110, 231, 183, 0.3) !important;
}

.dark-mode .bg-tertiary\/10 {
    background: rgba(252, 211, 77, 0.15) !important;
    border-color: rgba(252, 211, 77, 0.3) !important;
}

/* CTA Section - Final */
.dark-mode .bg-gradient-to-r.from-secondary\/20.via-primary\/20.to-tertiary\/20 {
    background: linear-gradient(to right,
        rgba(110, 231, 183, 0.12) 0%,
        rgba(96, 165, 250, 0.12) 50%,
        rgba(252, 211, 77, 0.12) 100%) !important;
}

/* CTA Buttons - Design System Specific */
.dark-mode button[onclick*="window.open"],
.dark-mode button[onclick*="openWhatsApp"] {
    transition: all 0.3s ease;
}

.dark-mode button.bg-primary.text-secondary[onclick] {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%) !important;
    color: var(--bg-primary) !important;
}

.dark-mode button.bg-primary.text-secondary[onclick]:hover {
    background: linear-gradient(135deg, var(--primary-light) 0%, var(--primary) 100%) !important;
    box-shadow: 0 8px 20px rgba(96, 165, 250, 0.4) !important;
}

/* Icon Badges in CTA */
.dark-mode .bg-primary\/20.p-6.rounded-2xl {
    background: rgba(96, 165, 250, 0.2) !important;
    border: 1px solid rgba(96, 165, 250, 0.3);
}

/* ============================================
   PLACEHOLDER AND INPUT COLORS
   ============================================ */
.dark-mode input.placeholder-textSecondary::placeholder,
.dark-mode textarea.placeholder-textSecondary::placeholder {
    color: var(--text-tertiary) !important;
    opacity: 0.8;
}

/* ============================================
   OPACITY AND TRANSPARENCY ADJUSTMENTS
   ============================================ */
.dark-mode .opacity-60 {
    opacity: 0.7 !important;
}

/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */
@media (max-width: 768px) {
    .dark-mode nav {
        background: rgba(10, 14, 20, 0.98) !important;
    }

    .dark-mode .card,
    .dark-mode .feature-card {
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
    }

    .dark-mode .bg-surface\/50,
    .dark-mode .bg-surface\/70 {
        background: rgba(21, 25, 34, 0.9) !important;
    }
}

/* ============================================
   TAILWIND CUSTOM CLASSES - DARK MODE FIX
   Correção para classes personalizadas do Tailwind
   nas páginas Suporte e Design System
   ============================================ */

/* Text Colors - Suporte & Design System Pages */
.dark-mode .text-textPrimary,
.dark-mode body.text-textPrimary {
    color: var(--text-primary) !important;
}

.dark-mode .text-textSecondary {
    color: var(--text-secondary) !important;
}

/* Background Colors - Custom Tailwind Classes */
.dark-mode .bg-background {
    background-color: var(--bg-primary) !important;
}

.dark-mode .bg-surface {
    background-color: var(--bg-secondary) !important;
}

/* Gradient Backgrounds - Body Override */
.dark-mode body.gradient-bg {
    background: linear-gradient(135deg, #0F1419 0%, #1a1f2e 50%, #232a31 100%) !important;
}

/* Primary/Secondary/Tertiary Text Colors from Tailwind Config */
.dark-mode .text-primary:not(.bg-primary):not(.border-primary) {
    color: var(--primary) !important;
}

.dark-mode .text-secondary:not(.bg-secondary):not(.border-secondary) {
    color: var(--secondary) !important;
}

.dark-mode .text-tertiary {
    color: var(--accent) !important;
}

.dark-mode .text-accent {
    color: var(--accent) !important;
}

.dark-mode .text-info {
    color: var(--info) !important;
}

.dark-mode .text-success {
    color: var(--success) !important;
}

.dark-mode .text-warning {
    color: var(--warning) !important;
}

.dark-mode .text-error {
    color: var(--error) !important;
}

/* Button Backgrounds - Respeitando cores originais do Design System */
.dark-mode button.bg-primary.text-secondary {
    background: linear-gradient(135deg, #E7CFA9 0%, #F0D9B8 100%) !important;
    color: #09455B !important;
}

.dark-mode button.bg-primary.text-secondary:hover {
    background: linear-gradient(135deg, #F0D9B8 0%, #F5E4C7 100%) !important;
}

.dark-mode button.bg-secondary.text-textPrimary {
    background: #09455B !important;
    color: var(--text-primary) !important;
}

.dark-mode button.bg-secondary.text-textPrimary:hover {
    background: #073A47 !important;
}

.dark-mode button.bg-tertiary.text-textPrimary {
    background: #F4A261 !important;
    color: var(--text-primary) !important;
}

/* Background Colors para divs/sections (não buttons) */
.dark-mode div.bg-primary:not(button),
.dark-mode section.bg-primary:not(button),
.dark-mode span.bg-primary:not(button) {
    background-color: var(--primary) !important;
}

.dark-mode .bg-primaryLight {
    background-color: var(--primary-light) !important;
}

.dark-mode div.bg-secondary:not(button),
.dark-mode section.bg-secondary:not(button),
.dark-mode span.bg-secondary:not(button) {
    background-color: var(--secondary) !important;
}

.dark-mode .bg-secondaryDark {
    background-color: var(--secondary-dark) !important;
}

.dark-mode div.bg-tertiary:not(button),
.dark-mode section.bg-tertiary:not(button),
.dark-mode span.bg-tertiary:not(button) {
    background-color: var(--accent) !important;
}

.dark-mode .bg-accent {
    background-color: var(--accent) !important;
}

.dark-mode .bg-info {
    background-color: var(--info) !important;
}

.dark-mode .bg-success {
    background-color: var(--success) !important;
}

.dark-mode .bg-warning {
    background-color: var(--warning) !important;
}

.dark-mode .bg-error {
    background-color: var(--error) !important;
}

/* Border Colors - Custom Classes */
.dark-mode .border-primary {
    border-color: var(--primary) !important;
}

.dark-mode .border-secondary {
    border-color: var(--secondary) !important;
}

.dark-mode .border-tertiary {
    border-color: var(--accent) !important;
}

.dark-mode .border-accent {
    border-color: var(--accent) !important;
}

.dark-mode .border-textSecondary {
    border-color: var(--text-secondary) !important;
}

/* Placeholder Colors */
.dark-mode .placeholder-textSecondary::placeholder,
.dark-mode input::placeholder,
.dark-mode textarea::placeholder {
    color: var(--text-tertiary) !important;
}

/* Focus States for Form Elements */
.dark-mode input:focus,
.dark-mode textarea:focus,
.dark-mode select:focus {
    border-color: var(--primary) !important;
}

/* Specific fixes for hardcoded Tailwind colors */
.dark-mode .bg-white {
    background-color: var(--bg-elevated) !important;
}

.dark-mode .text-gray-900,
.dark-mode .text-neutral-900 {
    color: var(--text-primary) !important;
}

.dark-mode .text-gray-600,
.dark-mode .text-gray-700 {
    color: var(--text-secondary) !important;
}

.dark-mode .border-gray-200,
.dark-mode .border-neutral-200 {
    border-color: var(--border-light) !important;
}

.dark-mode .bg-gray-50,
.dark-mode .bg-neutral-50 {
    background-color: var(--bg-tertiary) !important;
}

/* ============================================
   CORREÇÃO DEFINITIVA - MÁXIMA ESPECIFICIDADE
   Header, Footer, Cards, Títulos - TUDO
   ============================================ */

/* HEADER/NAV - FORÇAR DARK MODE COMPLETO */
.dark-mode nav,
.dark-mode nav *,
.dark-mode header,
.dark-mode header * {
    border-color: var(--border-light) !important;
}

.dark-mode nav {
    background-color: rgba(10, 14, 20, 0.95) !important;
    backdrop-filter: blur(12px) !important;
}

.dark-mode nav .container,
.dark-mode nav .container * {
    color: var(--text-primary) !important;
}

.dark-mode nav button,
.dark-mode nav a:not(.bg-accent):not(.bg-primary) {
    color: var(--text-secondary) !important;
}

.dark-mode nav button:hover,
.dark-mode nav a:hover {
    color: var(--primary) !important;
}

/* FOOTER - FORÇAR DARK MODE COMPLETO */
.dark-mode footer {
    background-color: var(--bg-secondary) !important;
    border-top-color: var(--border-light) !important;
}

.dark-mode footer *:not(.gradient-text) {
    color: var(--text-secondary) !important;
}

.dark-mode footer h3,
.dark-mode footer h4,
.dark-mode footer strong {
    color: var(--text-primary) !important;
}

.dark-mode footer a {
    color: var(--primary) !important;
}

.dark-mode footer a:hover {
    color: var(--primary-light) !important;
}

.dark-mode footer .bg-accent\/20 {
    background-color: rgba(252, 211, 77, 0.15) !important;
}

/* TODAS AS HEADINGS - FORÇAR CORES CORRETAS */
.dark-mode h1,
.dark-mode h2,
.dark-mode h3,
.dark-mode h4,
.dark-mode h5,
.dark-mode h6,
.dark-mode h1 *,
.dark-mode h2 *,
.dark-mode h3 *,
.dark-mode h4 *,
.dark-mode h5 *,
.dark-mode h6 * {
    color: var(--text-primary) !important;
}

/* TODOS OS PARÁGRAFOS E TEXTOS */
.dark-mode p:not(.gradient-text):not(.text-primary):not(.text-secondary):not(.text-accent),
.dark-mode span:not(.gradient-text):not(.text-primary):not(.text-secondary):not(.text-accent),
.dark-mode div:not(.gradient-text) {
    color: var(--text-secondary) !important;
}

/* TODOS OS CARDS - BACKGROUNDS ESCUROS */
.dark-mode .rounded-xl,
.dark-mode .rounded-2xl,
.dark-mode .rounded-lg {
    background-color: var(--bg-secondary) !important;
    border-color: var(--border-light) !important;
}

/* Cards específicos com classes bg- */
.dark-mode [class*="bg-surface"],
.dark-mode [class*="bg-background"],
.dark-mode .bg-white,
.dark-mode .bg-gray-50,
.dark-mode .bg-neutral-50 {
    background-color: var(--bg-secondary) !important;
}

/* Sections com backgrounds */
.dark-mode section {
    background-color: transparent !important;
}

.dark-mode section[class*="bg-"] {
    background-color: rgba(21, 25, 34, 0.5) !important;
}

/* Main content area */
.dark-mode main {
    background-color: transparent !important;
}

/* LABELS E SMALL TEXT */
.dark-mode label,
.dark-mode .text-sm,
.dark-mode .text-xs,
.dark-mode code:not(.text-primary) {
    color: var(--text-secondary) !important;
}

/* STRONG E EMPHASIS */
.dark-mode strong:not(.text-primary):not(.text-accent):not(.text-secondary) {
    color: var(--text-primary) !important;
}

/* ICON CONTAINERS */
.dark-mode [class*="bg-primary/"],
.dark-mode [class*="bg-accent/"],
.dark-mode [class*="bg-info/"],
.dark-mode [class*="bg-success/"],
.dark-mode [class*="bg-tertiary/"] {
    opacity: 1 !important;
}

/* DIVIDERS E BORDERS */
.dark-mode hr,
.dark-mode [class*="border-"] {
    border-color: var(--border-light) !important;
}

/* GARANTIR QUE GRADIENTS FUNCIONEM */
.dark-mode .gradient-text {
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 50%, var(--accent) 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

/* ============================================
   CORREÇÃO ULTRA-ESPECÍFICA POR PÁGINA
   Forçar Dark Mode em elementos problemáticos
   ============================================ */

/* PÁGINA SUPORTE - NAV/HEADER FORÇADO */
body.text-textPrimary.dark-mode nav,
body.gradient-bg.dark-mode nav {
    background: rgba(10, 14, 20, 0.95) !important;
    backdrop-filter: blur(12px) !important;
    border-bottom: 1px solid rgba(55, 65, 81, 0.5) !important;
}

body.text-textPrimary.dark-mode nav .logo-text-combo div,
body.gradient-bg.dark-mode nav .logo-text-combo div {
    color: #f9fafb !important;
}

body.text-textPrimary.dark-mode nav button,
body.text-textPrimary.dark-mode nav a,
body.gradient-bg.dark-mode nav button,
body.gradient-bg.dark-mode nav a {
    color: #d1d5db !important;
}

body.text-textPrimary.dark-mode nav button:hover,
body.text-textPrimary.dark-mode nav a:hover,
body.gradient-bg.dark-mode nav button:hover,
body.gradient-bg.dark-mode nav a:hover {
    color: #60a5fa !important;
}

body.text-textPrimary.dark-mode nav .bg-warning-50,
body.gradient-bg.dark-mode nav .bg-warning-50 {
    background-color: rgba(251, 146, 60, 0.15) !important;
}

body.text-textPrimary.dark-mode nav .text-warning-600,
body.gradient-bg.dark-mode nav .text-warning-600 {
    color: #fb923c !important;
}

body.text-textPrimary.dark-mode nav .bg-warning-500,
body.gradient-bg.dark-mode nav .bg-warning-500 {
    background-color: #f97316 !important;
}

body.text-textPrimary.dark-mode nav #languageDropdown,
body.gradient-bg.dark-mode nav #languageDropdown {
    background: #2d3748 !important;
    border: 1px solid #4b5563 !important;
}

body.text-textPrimary.dark-mode nav #languageDropdown button,
body.gradient-bg.dark-mode nav #languageDropdown button {
    color: #f9fafb !important;
}

body.text-textPrimary.dark-mode nav #languageDropdown button:hover,
body.gradient-bg.dark-mode nav #languageDropdown button:hover {
    background: #1f2937 !important;
    color: #60a5fa !important;
}

/* PÁGINA SUPORTE - FOOTER FORÇADO */
body.text-textPrimary.dark-mode footer,
body.gradient-bg.dark-mode footer {
    background-color: #151922 !important;
    border-top: 1px solid #374151 !important;
}

body.text-textPrimary.dark-mode footer h3,
body.gradient-bg.dark-mode footer h3 {
    color: #f9fafb !important;
}

body.text-textPrimary.dark-mode footer p,
body.text-textPrimary.dark-mode footer span,
body.gradient-bg.dark-mode footer p,
body.gradient-bg.dark-mode footer span {
    color: #d1d5db !important;
}

body.text-textPrimary.dark-mode footer a,
body.gradient-bg.dark-mode footer a {
    color: #60a5fa !important;
}

body.text-textPrimary.dark-mode footer a:hover,
body.gradient-bg.dark-mode footer a:hover {
    color: #93c5fd !important;
}

body.text-textPrimary.dark-mode footer .bg-accent\/20,
body.gradient-bg.dark-mode footer .bg-accent\/20 {
    background-color: rgba(252, 211, 77, 0.15) !important;
}

body.text-textPrimary.dark-mode footer .text-accent,
body.gradient-bg.dark-mode footer .text-accent {
    color: #fcd34d !important;
}

/* PÁGINA DESIGN SYSTEM - FOOTER FORÇADO */
body.gradient-bg.min-h-screen.text-textPrimary.dark-mode footer {
    background-color: #151922 !important;
    border-top: 1px solid #374151 !important;
}

body.gradient-bg.min-h-screen.text-textPrimary.dark-mode footer h3,
body.gradient-bg.min-h-screen.text-textPrimary.dark-mode footer .gradient-text {
    background: linear-gradient(135deg, #60a5fa 0%, #6ee7b7 50%, #fcd34d 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

body.gradient-bg.min-h-screen.text-textPrimary.dark-mode footer p,
body.gradient-bg.min-h-screen.text-textPrimary.dark-mode footer span:not(.gradient-text) {
    color: #d1d5db !important;
}

body.gradient-bg.min-h-screen.text-textPrimary.dark-mode footer a {
    color: #60a5fa !important;
}

body.gradient-bg.min-h-screen.text-textPrimary.dark-mode footer a:hover {
    color: #93c5fd !important;
}

/* PÁGINA DESIGN SYSTEM - SEÇÕES ESPECÍFICAS */

/* Seção Paleta de Cores */
body.gradient-bg.min-h-screen.text-textPrimary.dark-mode section#colors h2,
body.gradient-bg.min-h-screen.text-textPrimary.dark-mode section#colors h3,
body.gradient-bg.min-h-screen.text-textPrimary.dark-mode section#colors h4 {
    color: #f9fafb !important;
}

body.gradient-bg.min-h-screen.text-textPrimary.dark-mode section#colors p {
    color: #d1d5db !important;
}

body.gradient-bg.min-h-screen.text-textPrimary.dark-mode section#colors .color-swatch {
    background-color: #151922 !important;
    border: 1px solid #374151 !important;
}

body.gradient-bg.min-h-screen.text-textPrimary.dark-mode section#colors .color-swatch h4 {
    color: #f9fafb !important;
}

body.gradient-bg.min-h-screen.text-textPrimary.dark-mode section#colors .color-swatch p {
    color: #d1d5db !important;
}

body.gradient-bg.min-h-screen.text-textPrimary.dark-mode section#colors .color-swatch code {
    color: #60a5fa !important;
}

/* ULTRA-SPECIFIC FIX: Color swatches in ALL sections */
body.dark-mode .color-swatch,
body.dark-mode .rounded-xl.p-6.border {
    background-color: #151922 !important;
    border-color: #374151 !important;
}

body.dark-mode .color-swatch h4,
body.dark-mode .color-swatch .font-bold {
    color: #f9fafb !important;
}

body.dark-mode .color-swatch p,
body.dark-mode .color-swatch .text-textSecondary {
    color: #d1d5db !important;
}

body.dark-mode .color-swatch code {
    color: #60a5fa !important;
}

/* Seção Typography */
body.gradient-bg.min-h-screen.text-textPrimary.dark-mode section#typography {
    background-color: rgba(21, 25, 34, 0.5) !important;
}

body.gradient-bg.min-h-screen.text-textPrimary.dark-mode section#typography h2,
body.gradient-bg.min-h-screen.text-textPrimary.dark-mode section#typography h3 {
    color: #f9fafb !important;
}

body.gradient-bg.min-h-screen.text-textPrimary.dark-mode section#typography p {
    color: #d1d5db !important;
}

body.gradient-bg.min-h-screen.text-textPrimary.dark-mode section#typography .bg-background {
    background-color: #0a0e14 !important;
    border: 1px solid #374151 !important;
}

body.gradient-bg.min-h-screen.text-textPrimary.dark-mode section#typography .bg-background h1,
body.gradient-bg.min-h-screen.text-textPrimary.dark-mode section#typography .bg-background h2,
body.gradient-bg.min-h-screen.text-textPrimary.dark-mode section#typography .bg-background h3,
body.gradient-bg.min-h-screen.text-textPrimary.dark-mode section#typography .bg-background h4,
body.gradient-bg.min-h-screen.text-textPrimary.dark-mode section#typography .bg-background h5,
body.gradient-bg.min-h-screen.text-textPrimary.dark-mode section#typography .bg-background h6,
body.gradient-bg.min-h-screen.text-textPrimary.dark-mode section#typography .bg-background p {
    color: #f9fafb !important;
}

body.gradient-bg.min-h-screen.text-textPrimary.dark-mode section#typography .bg-background code {
    color: #d1d5db !important;
}

/* Seção Components */
body.gradient-bg.min-h-screen.text-textPrimary.dark-mode section#components {
    background-color: rgba(21, 25, 34, 0.5) !important;
}

body.gradient-bg.min-h-screen.text-textPrimary.dark-mode section#components h2,
body.gradient-bg.min-h-screen.text-textPrimary.dark-mode section#components h3,
body.gradient-bg.min-h-screen.text-textPrimary.dark-mode section#components h4 {
    color: #f9fafb !important;
}

body.gradient-bg.min-h-screen.text-textPrimary.dark-mode section#components p,
body.gradient-bg.min-h-screen.text-textPrimary.dark-mode section#components div:not(.gradient-text) {
    color: #d1d5db !important;
}

body.gradient-bg.min-h-screen.text-textPrimary.dark-mode section#components .bg-background {
    background-color: #0a0e14 !important;
    border: 1px solid #374151 !important;
}

body.gradient-bg.min-h-screen.text-textPrimary.dark-mode section#components .bg-surface {
    background-color: #151922 !important;
    border: 1px solid #374151 !important;
}

body.gradient-bg.min-h-screen.text-textPrimary.dark-mode section#components .text-textPrimary {
    color: #f9fafb !important;
}

body.gradient-bg.min-h-screen.text-textPrimary.dark-mode section#components .text-textSecondary {
    color: #d1d5db !important;
}

body.gradient-bg.min-h-screen.text-textPrimary.dark-mode section#components label {
    color: #d1d5db !important;
}

body.gradient-bg.min-h-screen.text-textPrimary.dark-mode section#components input,
body.gradient-bg.min-h-screen.text-textPrimary.dark-mode section#components select,
body.gradient-bg.min-h-screen.text-textPrimary.dark-mode section#components textarea {
    background-color: #151922 !important;
    border: 1px solid #374151 !important;
    color: #f9fafb !important;
}

body.gradient-bg.min-h-screen.text-textPrimary.dark-mode section#components input::placeholder,
body.gradient-bg.min-h-screen.text-textPrimary.dark-mode section#components textarea::placeholder {
    color: #9ca3af !important;
}

/* Seção Mockups/Aplicação na Interface */
body.gradient-bg.min-h-screen.text-textPrimary.dark-mode section h2,
body.gradient-bg.min-h-screen.text-textPrimary.dark-mode section h3 {
    color: #f9fafb !important;
}

body.gradient-bg.min-h-screen.text-textPrimary.dark-mode section p:not(.gradient-text) {
    color: #d1d5db !important;
}

body.gradient-bg.min-h-screen.text-textPrimary.dark-mode section .bg-surface {
    background-color: #151922 !important;
    border: 1px solid #374151 !important;
}

body.gradient-bg.min-h-screen.text-textPrimary.dark-mode section .bg-background {
    background-color: #0a0e14 !important;
}

body.gradient-bg.min-h-screen.text-textPrimary.dark-mode section .text-textPrimary {
    color: #f9fafb !important;
}

body.gradient-bg.min-h-screen.text-textPrimary.dark-mode section .text-textSecondary {
    color: #d1d5db !important;
}

/* Seção CTA "Seja parte da revolução" */
body.gradient-bg.min-h-screen.text-textPrimary.dark-mode section .bg-gradient-to-r {
    background: linear-gradient(to right,
        rgba(110, 231, 183, 0.12) 0%,
        rgba(96, 165, 250, 0.12) 50%,
        rgba(252, 211, 77, 0.12) 100%) !important;
    border: 1px solid rgba(96, 165, 250, 0.3) !important;
}

body.gradient-bg.min-h-screen.text-textPrimary.dark-mode section h2,
body.gradient-bg.min-h-screen.text-textPrimary.dark-mode section h2 span {
    color: #f9fafb !important;
}

body.gradient-bg.min-h-screen.text-textPrimary.dark-mode section p strong {
    color: #60a5fa !important;
}

body.gradient-bg.min-h-screen.text-textPrimary.dark-mode section .text-success,
body.gradient-bg.min-h-screen.text-textPrimary.dark-mode section .text-info,
body.gradient-bg.min-h-screen.text-textPrimary.dark-mode section .text-tertiary {
    color: inherit !important;
}

/* ============================================
   CORREÇÃO FINAL DEFINITIVA - MÁXIMA PRIORIDADE
   SuperDesign.dev - 2025-10-12 17:30

   Esta seção DEVE ser a última no arquivo.
   Usa !important em TUDO para garantir que sobrescreva
   qualquer inline style ou Tailwind class.

   IMPORTANT: dark-mode class is on <html>, not <body>
   ============================================ */

/* SUPORTE PAGE - NAV - Sobrescrever inline styles */
.dark-mode body.gradient-bg.min-h-screen.text-textPrimary nav.fixed,
.dark-mode nav.fixed {
    background-color: rgba(10, 14, 20, 0.98) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border-bottom-color: rgba(55, 65, 81, 0.6) !important;
}

/* Logo text - FaseUp */
.dark-mode nav .logo-text-combo div.text-neutral-900,
.dark-mode nav div.text-2xl.font-black.text-neutral-900,
.dark-mode nav .text-neutral-900 {
    color: #f9fafb !important;
}

/* Nav buttons e links */
.dark-mode nav button:not(.bg-accent),
.dark-mode nav a:not(.bg-accent):not(.bg-primary) {
    color: #d1d5db !important;
}

.dark-mode nav button:hover:not(.bg-accent),
.dark-mode nav a:hover:not(.bg-accent):not(.bg-primary) {
    color: #60a5fa !important;
}

/* Language dropdown - CRITICAL */
.dark-mode nav #languageDropdown.bg-white,
.dark-mode nav div[id*="language"].bg-white,
.dark-mode nav #languageDropdown {
    background-color: #2d3748 !important;
    border-color: #4b5563 !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.6) !important;
}

.dark-mode nav #languageDropdown button,
.dark-mode nav #languageDropdown .language-option {
    color: #f9fafb !important;
}

.dark-mode nav #languageDropdown button:hover,
.dark-mode nav #languageDropdown .language-option:hover,
.dark-mode nav #languageDropdown button.hover\\:bg-neutral-50:hover {
    background-color: #1f2937 !important;
    color: #60a5fa !important;
}

/* Warning badge */
.dark-mode nav .bg-warning-50 {
    background-color: rgba(251, 146, 60, 0.15) !important;
}

.dark-mode nav .border-warning-200 {
    border-color: rgba(251, 146, 60, 0.3) !important;
}

.dark-mode nav .text-warning-600 {
    color: #fb923c !important;
}

.dark-mode nav .bg-warning-500 {
    background-color: #f97316 !important;
}

/* SUPORTE PAGE - FOOTER */
.dark-mode footer.py-8.px-4,
.dark-mode footer {
    background-color: #151922 !important;
    border-top-color: #374151 !important;
}

.dark-mode footer h3,
.dark-mode footer h3.gradient-text {
    background: linear-gradient(135deg, #60a5fa 0%, #6ee7b7 50%, #fcd34d 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

.dark-mode footer p.text-textSecondary,
.dark-mode footer .text-textSecondary {
    color: #d1d5db !important;
}

.dark-mode footer a.text-primary,
.dark-mode footer a {
    color: #60a5fa !important;
}

.dark-mode footer a:hover {
    color: #93c5fd !important;
}

.dark-mode footer .bg-accent\/20 {
    background-color: rgba(252, 211, 77, 0.15) !important;
}

.dark-mode footer .text-accent {
    color: #fcd34d !important;
}

/* DESIGN SYSTEM PAGE - NAV */
.dark-mode body.gradient-bg.min-h-screen.text-textPrimary nav.fixed.bg-background\/80,
.dark-mode nav.bg-background\/80 {
    background-color: rgba(10, 14, 20, 0.98) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border-bottom-color: rgba(55, 65, 81, 0.6) !important;
}

/* DESIGN SYSTEM PAGE - FOOTER */
.dark-mode footer.py-8.px-6 {
    background-color: #151922 !important;
    border-top-color: #374151 !important;
}

/* DESIGN SYSTEM - Seção Paleta de Cores - TODOS os cards */
.dark-mode section#colors .color-swatch.bg-surface,
.dark-mode section#colors .color-swatch {
    background-color: #151922 !important;
    border-color: #374151 !important;
}

.dark-mode section#colors .color-swatch h4.font-bold.text-textPrimary,
.dark-mode section#colors .color-swatch h4 {
    color: #f9fafb !important;
}

.dark-mode section#colors .color-swatch p.text-textSecondary,
.dark-mode section#colors .color-swatch p {
    color: #d1d5db !important;
}

.dark-mode section#colors .color-swatch code.text-primary,
.dark-mode section#colors .color-swatch code {
    color: #60a5fa !important;
}

/* DESIGN SYSTEM - Cores de Destaque */
.dark-mode section#colors .grid .color-swatch {
    background-color: #151922 !important;
    border-color: #374151 !important;
}

/* DESIGN SYSTEM - Cores do Sistema */
.dark-mode section#colors div[class*="color-swatch"] {
    background-color: #151922 !important;
    border-color: #374151 !important;
}

/* DESIGN SYSTEM - Seção Components */
.dark-mode section#components h2.text-textPrimary,
.dark-mode section#components h3.text-textPrimary,
.dark-mode section#components h4 {
    color: #f9fafb !important;
}

.dark-mode section#components p.text-textSecondary {
    color: #d1d5db !important;
}

.dark-mode section#components .bg-background.rounded-xl {
    background-color: #0a0e14 !important;
    border-color: #374151 !important;
}

.dark-mode section#components .bg-surface.rounded-xl {
    background-color: #151922 !important;
    border-color: #374151 !important;
}

/* Icon system cards */
.dark-mode section#components .bg-primary\/20.rounded-xl {
    background-color: rgba(96, 165, 250, 0.15) !important;
}

.dark-mode section#components .bg-tertiary\/20 {
    background-color: rgba(252, 211, 77, 0.15) !important;
}

.dark-mode section#components .bg-success\/20.rounded-xl {
    background-color: rgba(110, 231, 183, 0.15) !important;
}

.dark-mode section#components .bg-accent\/20.rounded-xl {
    background-color: rgba(252, 211, 77, 0.15) !important;
}

/* Form labels */
.dark-mode section#components label.text-textSecondary {
    color: #d1d5db !important;
}

/* Form inputs */
.dark-mode section#components input.bg-surface,
.dark-mode section#components select.bg-surface,
.dark-mode section#components textarea.bg-surface {
    background-color: #1f2937 !important;
    border-color: #4b5563 !important;
    color: #f9fafb !important;
}

.dark-mode section#components input::placeholder,
.dark-mode section#components textarea::placeholder {
    color: #9ca3af !important;
}

.dark-mode section#components input.placeholder-textSecondary::placeholder,
.dark-mode section#components textarea.placeholder-textSecondary::placeholder {
    color: #9ca3af !important;
}

/* DESIGN SYSTEM - Aplicação na Interface Section */
.dark-mode section .bg-surface.rounded-xl.p-8.border.shadow-strong {
    background-color: #151922 !important;
    border-color: #374151 !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6) !important;
}

.dark-mode section .w-80.h-96.bg-surface {
    background-color: #151922 !important;
    border-color: #374151 !important;
}

.dark-mode section .bg-background.rounded-lg,
.dark-mode section .bg-background.rounded-\\[2rem\\] {
    background-color: #0a0e14 !important;
}

/* DESIGN SYSTEM - CTA Section "Seja parte da revolução" */
.dark-mode section .bg-gradient-to-r.from-secondary\/20.via-primary\/20.to-tertiary\/20 {
    background: linear-gradient(to right,
        rgba(110, 231, 183, 0.12) 0%,
        rgba(96, 165, 250, 0.12) 50%,
        rgba(252, 211, 77, 0.12) 100%) !important;
    border-color: rgba(96, 165, 250, 0.3) !important;
}

.dark-mode section h2.text-textPrimary {
    color: #f9fafb !important;
}

.dark-mode section p.text-textSecondary {
    color: #d1d5db !important;
}

.dark-mode section p strong.text-primary {
    color: #60a5fa !important;
}

.dark-mode section .bg-primary\/20.p-6.rounded-2xl {
    background-color: rgba(96, 165, 250, 0.2) !important;
    border: 1px solid rgba(96, 165, 250, 0.3);
}

/* UNIVERSAL FIXES - Apply to ALL pages */

/* All text colors */
.dark-mode h1.text-textPrimary,
.dark-mode h2.text-textPrimary,
.dark-mode h3.text-textPrimary,
.dark-mode h4.text-textPrimary,
.dark-mode h5.text-textPrimary,
.dark-mode h6.text-textPrimary {
    color: #f9fafb !important;
}

.dark-mode p.text-textSecondary,
.dark-mode span.text-textSecondary,
.dark-mode div.text-textSecondary {
    color: #d1d5db !important;
}

/* All backgrounds */
.dark-mode .bg-surface,
.dark-mode div.bg-surface,
.dark-mode section.bg-surface {
    background-color: #151922 !important;
}

.dark-mode .bg-background,
.dark-mode div.bg-background {
    background-color: #0a0e14 !important;
}

/* All borders */
.dark-mode .border-primary\/20,
.dark-mode [class*="border-primary/20"] {
    border-color: rgba(96, 165, 250, 0.3) !important;
}

.dark-mode .border-primary\/30,
.dark-mode [class*="border-primary/30"] {
    border-color: rgba(96, 165, 250, 0.4) !important;
}

/* Brand colors */
.dark-mode .text-primary:not(.bg-primary) {
    color: #60a5fa !important;
}

.dark-mode .text-secondary:not(.bg-secondary) {
    color: #6ee7b7 !important;
}

.dark-mode .text-tertiary,
.dark-mode .text-accent {
    color: #fcd34d !important;
}

.dark-mode .text-info {
    color: #93c5fd !important;
}

.dark-mode .text-success {
    color: #6ee7b7 !important;
}

.dark-mode .text-warning {
    color: #fcd34d !important;
}

.dark-mode .text-error {
    color: #fca5a5 !important;
}

/* Gradient text */
.dark-mode .gradient-text {
    background: linear-gradient(135deg, #60a5fa 0%, #6ee7b7 50%, #fcd34d 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

/* ============================================
   DESIGN SYSTEM PAGE - SURGICAL BUG FIXES
   SuperDesign.dev - 2025-10-12
   Ticket: 4 Critical Dark Mode Bugs
   ============================================ */

/* ===== BUG 1 FIX: Color Swatches - Keep preview boxes VISIBLE ===== */
/* Problem: Color preview boxes disappearing in dark mode
   Solution: Ensure inline colored divs remain visible with original colors */

.dark-mode section#colors .color-swatch > div[style*="background-color"] {
    /* Preserve the inline background colors */
    opacity: 1 !important;
    filter: none !important;
}

/* Ensure card backgrounds are dark, but not the color preview boxes */
.dark-mode section#colors .color-swatch.bg-surface {
    background-color: #151922 !important;
    border-color: #374151 !important;
}

.dark-mode section#colors .color-swatch.bg-surface:hover {
    border-color: #60a5fa !important;
    box-shadow: 0 8px 20px rgba(96, 165, 250, 0.3) !important;
}

/* Text within color swatches */
.dark-mode section#colors .color-swatch h4.font-bold {
    color: #f9fafb !important;
}

.dark-mode section#colors .color-swatch p.text-textSecondary.text-sm {
    color: #d1d5db !important;
}

.dark-mode section#colors .color-swatch code.text-primary {
    color: #60a5fa !important;
}

/* ===== BUG 2 FIX: Typography Section - Complete Dark Mode ===== */
/* Problem: Section and cards still showing light mode colors
   Solution: Force dark backgrounds and proper text colors */

/* Section background with opacity */
.dark-mode section#typography.py-20.px-6.bg-surface\\/50 {
    background-color: rgba(21, 25, 34, 0.5) !important;
}

/* Typography demo cards */
.dark-mode section#typography .bg-background.rounded-xl.p-8 {
    background-color: #0a0e14 !important;
    border-color: #374151 !important;
}

/* All headings within typography cards */
.dark-mode section#typography .bg-background h1,
.dark-mode section#typography .bg-background h2,
.dark-mode section#typography .bg-background h3,
.dark-mode section#typography .bg-background h4,
.dark-mode section#typography .bg-background h5,
.dark-mode section#typography .bg-background h6 {
    color: #f9fafb !important;
}

/* Body text samples */
.dark-mode section#typography .bg-background p {
    color: #f9fafb !important;
}

/* Code blocks showing class names */
.dark-mode section#typography .bg-background code.text-textSecondary {
    color: #d1d5db !important;
}

/* Monospace text sample */
.dark-mode section#typography .bg-background code.text-primary.font-mono {
    color: #60a5fa !important;
}

/* Section titles */
.dark-mode section#typography h2.text-textPrimary {
    color: #f9fafb !important;
}

.dark-mode section#typography h3.text-xl.font-bold.text-primary {
    color: #60a5fa !important;
}

/* ===== BUG 3 FIX: Components Section - Remove White Line ===== */
/* Problem: Unwanted white line/border appearing
   Solution: Ensure proper border colors and section background */

/* Section background */
.dark-mode section#components.py-20.px-6.bg-surface\\/50 {
    background-color: rgba(21, 25, 34, 0.5) !important;
    border: none !important;
}

/* Component demo cards */
.dark-mode section#components .bg-background.rounded-xl.p-8 {
    background-color: #0a0e14 !important;
    border-color: #374151 !important;
}

.dark-mode section#components .bg-surface.rounded-xl {
    background-color: #151922 !important;
    border-color: #374151 !important;
}

/* Remove any stray borders */
.dark-mode section#components .border {
    border-color: #374151 !important;
}

/* Ensure no white borders on cards */
.dark-mode section#components .border-primary\\/20 {
    border-color: rgba(96, 165, 250, 0.3) !important;
}

.dark-mode section#components .border-accent\\/40 {
    border-color: rgba(252, 211, 77, 0.4) !important;
}

/* ===== BUG 4 FIX: Dashboard Executivo - Force Dark Mode ===== */
/* Problem: Desktop dashboard preview still in light mode
   Solution: Target the specific card structure with high specificity */

/* Outer card container */
.dark-mode section .bg-surface.rounded-xl.p-8.border.border-primary\\/20.shadow-strong {
    background-color: #151922 !important;
    border-color: #374151 !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6) !important;
}

/* Inner dashboard background */
.dark-mode section .bg-surface.rounded-xl.p-8 > .bg-background.rounded-lg.p-6 {
    background-color: #0a0e14 !important;
}

/* Dashboard title */
.dark-mode section .bg-background.rounded-lg h3.text-lg.font-bold.text-primary {
    color: #60a5fa !important;
}

/* Dashboard text */
.dark-mode section .bg-background.rounded-lg .text-textPrimary {
    color: #f9fafb !important;
}

.dark-mode section .bg-background.rounded-lg .text-textSecondary {
    color: #d1d5db !important;
}

/* Dashboard stat cards with gradient backgrounds */
.dark-mode section .bg-background.rounded-lg .bg-gradient-to-br.from-primary\\/10.to-primary\\/20 {
    background: linear-gradient(135deg, rgba(96, 165, 250, 0.15) 0%, rgba(96, 165, 250, 0.25) 100%) !important;
    border-color: rgba(96, 165, 250, 0.4) !important;
}

.dark-mode section .bg-background.rounded-lg .bg-gradient-to-br.from-success\\/10.to-success\\/20 {
    background: linear-gradient(135deg, rgba(110, 231, 183, 0.15) 0%, rgba(110, 231, 183, 0.25) 100%) !important;
    border-color: rgba(110, 231, 183, 0.4) !important;
}

/* Dashboard project list items */
.dark-mode section .bg-background.rounded-lg .bg-surface.rounded-lg.border.border-primary\\/20 {
    background-color: #151922 !important;
    border-color: rgba(96, 165, 250, 0.3) !important;
}

/* Icon containers within dashboard */
.dark-mode section .bg-background.rounded-lg .bg-primary\\/20 {
    background-color: rgba(96, 165, 250, 0.15) !important;
}

.dark-mode section .bg-background.rounded-lg .bg-tertiary\\/20 {
    background-color: rgba(252, 211, 77, 0.15) !important;
}

/* Success badge in dashboard header */
.dark-mode section .bg-background.rounded-lg .bg-success.rounded-full {
    background-color: #6ee7b7 !important;
    color: #0a0e14 !important;
}

/* ===== ADDITIONAL FIXES: Mobile Preview (Left side) ===== */
/* Ensure mobile mockup is also properly styled */

.dark-mode section .w-80.h-96.bg-surface.rounded-\\[3rem\\] {
    background-color: #151922 !important;
    border-color: #374151 !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6) !important;
}

.dark-mode section .w-80.h-96.bg-surface .bg-background.rounded-\\[2rem\\] {
    background-color: #0a0e14 !important;
}

.dark-mode section .w-80.h-96 .text-textPrimary {
    color: #f9fafb !important;
}

.dark-mode section .w-80.h-96 .text-textSecondary {
    color: #d1d5db !important;
}

.dark-mode section .w-80.h-96 .text-primary {
    color: #60a5fa !important;
}

/* END OF SURGICAL BUG FIXES */

/* ============================================
   DESIGN SYSTEM - ADDITIONAL DARK MODE ENHANCEMENTS
   SuperDesign.dev - 2025-10-12 - FINAL REVIEW
   Complete coverage for all remaining edge cases
   ============================================ */

/* ===== ESPAÇAMENTO E LAYOUT SECTION ===== */
/* Ensure spacing demo bars are visible */
.dark-mode section .bg-primary.rounded {
    background-color: var(--primary) !important;
    opacity: 1 !important;
}

.dark-mode section .bg-tertiary.rounded-sm {
    background-color: #fcd34d !important;
    opacity: 1 !important;
}

.dark-mode section .bg-accent.rounded-md {
    background-color: #fcd34d !important;
    opacity: 1 !important;
}

.dark-mode section .bg-info.rounded-lg {
    background-color: #93c5fd !important;
    opacity: 1 !important;
}

.dark-mode section .bg-success.rounded-xl {
    background-color: #6ee7b7 !important;
    opacity: 1 !important;
}

/* Spacing section cards */
.dark-mode section .bg-surface.rounded-xl.p-8.border.border-primary\\/20 {
    background-color: #151922 !important;
    border-color: #374151 !important;
}

/* Text within spacing section */
.dark-mode section .bg-surface.rounded-xl span.text-textPrimary {
    color: #f9fafb !important;
}

/* ===== TYPOGRAPHY SECTION - COMPLETE OVERRIDE ===== */
/* Force all typography demos to be visible */
.dark-mode section#typography h1.text-5xl.font-black.text-textPrimary,
.dark-mode section#typography h2.text-4xl.font-bold.text-textPrimary,
.dark-mode section#typography h3.text-3xl.font-bold.text-textPrimary,
.dark-mode section#typography h4.text-2xl.font-semibold.text-textPrimary,
.dark-mode section#typography h5.text-xl.font-semibold.text-textPrimary,
.dark-mode section#typography h6.text-lg.font-medium.text-textPrimary {
    color: #f9fafb !important;
}

/* Body text samples in typography */
.dark-mode section#typography p.text-lg.text-textPrimary,
.dark-mode section#typography p.text-base.text-textPrimary {
    color: #f9fafb !important;
}

.dark-mode section#typography p.text-sm.text-textSecondary,
.dark-mode section#typography p.text-xs.text-textSecondary {
    color: #d1d5db !important;
}

/* Code samples in typography */
.dark-mode section#typography code.text-primary.font-mono {
    color: #60a5fa !important;
}

/* ===== HERO SECTION - GRADIENT TEXT ===== */
/* Ensure gradient text is bright and visible */
.dark-mode section h1.gradient-text {
    background: linear-gradient(135deg, #60a5fa 0%, #6ee7b7 50%, #fcd34d 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

/* Strong text with brand colors in hero */
.dark-mode section p strong.text-primary {
    color: #60a5fa !important;
    font-weight: 600;
}

.dark-mode section p strong.text-tertiary {
    color: #fcd34d !important;
    font-weight: 600;
}

.dark-mode section p strong.text-accent {
    color: #fcd34d !important;
    font-weight: 600;
}

/* ===== VALUES BANNER - EMOJI SECTION ===== */
.dark-mode section .bg-gradient-to-r.from-secondary\\/20.via-primary\\/10.to-tertiary\\/20 h3.text-primary {
    color: #60a5fa !important;
}

.dark-mode section .bg-gradient-to-r.from-secondary\\/20.via-primary\\/10.to-tertiary\\/20 p.text-textSecondary {
    color: #d1d5db !important;
}

/* ===== BUTTON DEMOS - ENSURE VISIBILITY ===== */
/* Primary button with gradient */
.dark-mode section#components button.bg-primary.text-secondary.px-6.py-3 {
    background: linear-gradient(135deg, #E7CFA9 0%, #F0D9B8 100%) !important;
    color: #09455B !important;
}

.dark-mode section#components button.bg-primary.text-secondary:hover {
    background: linear-gradient(135deg, #F0D9B8 0%, #F5E4C7 100%) !important;
}

/* Secondary button */
.dark-mode section#components button.bg-secondary.text-textPrimary.px-6.py-3 {
    background: #09455B !important;
    color: #f9fafb !important;
}

.dark-mode section#components button.bg-secondary.text-textPrimary:hover {
    background: #073A47 !important;
}

/* Tertiary button */
.dark-mode section#components button.bg-tertiary.text-textPrimary.px-6.py-3 {
    background: #F4A261 !important;
    color: #f9fafb !important;
}

/* ===== CARD DEMOS - GRADIENT BACKGROUNDS ===== */
.dark-mode section#components .bg-gradient-to-br.from-primary\\/10.to-tertiary\\/10 {
    background: linear-gradient(135deg, rgba(96, 165, 250, 0.15) 0%, rgba(252, 211, 77, 0.15) 100%) !important;
    border-color: rgba(96, 165, 250, 0.3) !important;
}

/* ===== MOCKUP SECTION - PROGRESS BARS ===== */
/* Mobile mockup progress bar */
.dark-mode section .w-full.h-3.bg-surface.rounded-full {
    background-color: #1f2937 !important;
}

.dark-mode section .w-3\\/4.h-full.bg-gradient-to-r.from-primary.to-tertiary,
.dark-mode section .w-4\\/5.h-full.bg-gradient-to-r.from-primary.to-tertiary,
.dark-mode section .w-3\\/5.h-full.bg-gradient-to-r.from-tertiary.to-accent {
    background: linear-gradient(to right, #60a5fa 0%, #fcd34d 100%) !important;
}

/* Desktop mockup progress bars */
.dark-mode section .w-16.h-2.bg-surface.rounded-full {
    background-color: #1f2937 !important;
}

/* ===== STATUS INDICATORS IN MOCKUPS ===== */
.dark-mode section .bg-success\\/10.rounded-lg {
    background: rgba(110, 231, 183, 0.15) !important;
    border-color: rgba(110, 231, 183, 0.3) !important;
}

.dark-mode section .border-success\\/20 {
    border-color: rgba(110, 231, 183, 0.3) !important;
}

.dark-mode section .bg-tertiary\\/10.rounded-lg {
    background: rgba(252, 211, 77, 0.15) !important;
    border-color: rgba(252, 211, 77, 0.3) !important;
}

.dark-mode section .border-tertiary\\/20 {
    border-color: rgba(252, 211, 77, 0.3) !important;
}

.dark-mode section .border-textSecondary\\/20 {
    border-color: rgba(209, 213, 219, 0.3) !important;
}

/* ===== ICON COLORS IN MOCKUPS ===== */
.dark-mode section .text-success {
    color: #6ee7b7 !important;
}

.dark-mode section .text-tertiary {
    color: #fcd34d !important;
}

.dark-mode section .text-accent {
    color: #fcd34d !important;
}

.dark-mode section .text-secondary:not(.bg-secondary) {
    color: #6ee7b7 !important;
}

/* ===== BOTTOM NAVIGATION IN MOBILE MOCKUP ===== */
.dark-mode section .w-10.h-10.bg-primary\\/20.rounded-lg {
    background: rgba(96, 165, 250, 0.2) !important;
}

.dark-mode section .w-10.h-10.bg-secondary\\/20.rounded-lg {
    background: rgba(110, 231, 183, 0.2) !important;
}

.dark-mode section .w-10.h-10.bg-accent\\/20.rounded-lg {
    background: rgba(252, 211, 77, 0.2) !important;
}

/* User avatar circle in mobile mockup */
.dark-mode section .w-8.h-8.bg-primary.rounded-full {
    background: var(--primary) !important;
}

.dark-mode section .w-8.h-8.bg-primary.rounded-full .text-secondary {
    color: #09455B !important;
}

/* ===== CTA SECTION - FINAL CALL TO ACTION ===== */
.dark-mode section .bg-gradient-to-r.from-secondary\\/20.via-primary\\/20.to-tertiary\\/20.backdrop-blur-md {
    background: linear-gradient(to right,
        rgba(110, 231, 183, 0.12) 0%,
        rgba(96, 165, 250, 0.12) 50%,
        rgba(252, 211, 77, 0.12) 100%) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border-color: rgba(96, 165, 250, 0.3) !important;
}

/* CTA title with gradient */
.dark-mode section h2.text-4xl.font-bold.text-textPrimary span.gradient-text {
    background: linear-gradient(135deg, #60a5fa 0%, #6ee7b7 50%, #fcd34d 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

/* Icon features at bottom of CTA */
.dark-mode section .text-success {
    color: #6ee7b7 !important;
}

.dark-mode section .text-info {
    color: #93c5fd !important;
}

/* ===== FOOTER - FINAL SECTION ===== */
.dark-mode footer.py-8.px-6.border-t {
    background-color: #0a0e14 !important;
    border-top-color: #374151 !important;
}

.dark-mode footer h3.text-2xl.font-bold.gradient-text {
    background: linear-gradient(135deg, #60a5fa 0%, #6ee7b7 50%, #fcd34d 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

.dark-mode footer p.text-textSecondary {
    color: #d1d5db !important;
}

.dark-mode footer a.text-primary {
    color: #60a5fa !important;
}

.dark-mode footer a.text-primary:hover {
    color: #93c5fd !important;
}

.dark-mode footer span.text-textSecondary {
    color: #9ca3af !important;
}

/* ===== SCROLL BEHAVIOR AND ANIMATIONS ===== */
/* Ensure animations work smoothly in dark mode */
.dark-mode .animate-fade-up,
.dark-mode .animate-float {
    opacity: 1 !important;
}

/* ===== CODE BLOCKS AND PRE ELEMENTS ===== */
.dark-mode code,
.dark-mode pre {
    background-color: #1f2937 !important;
    color: #d1d5db !important;
    border: 1px solid #374151 !important;
}

.dark-mode .code-block {
    background-color: #1f2937 !important;
    border-color: #374151 !important;
}

/* ===== ACCESSIBILITY - FOCUS STATES ===== */
.dark-mode button:focus,
.dark-mode a:focus,
.dark-mode input:focus,
.dark-mode select:focus,
.dark-mode textarea:focus {
    outline: 2px solid var(--primary) !important;
    outline-offset: 2px !important;
}

/* ===== BACKDROP BLUR ELEMENTS ===== */
.dark-mode .backdrop-blur-md {
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
}

/* ===== FINAL SAFETY NET ===== */
/* Catch-all for any remaining light backgrounds */
.dark-mode section[class*="bg-surface"],
.dark-mode div[class*="bg-surface"]:not(button) {
    background-color: #151922 !important;
}

.dark-mode section[class*="bg-background"],
.dark-mode div[class*="bg-background"]:not(button) {
    background-color: #0a0e14 !important;
}

/* Ensure all text is readable */
.dark-mode [class*="text-textPrimary"] {
    color: #f9fafb !important;
}

.dark-mode [class*="text-textSecondary"] {
    color: #d1d5db !important;
}

/* ============================================
   DESIGN SYSTEM PAGE - COMPLETE BORDER FIXES
   Date: 2025-10-12
   Issue: All borders showing Light Mode colors in Dark Mode
   Solution: Ultra-high specificity overrides for all border variants
   ============================================ */

/* === NAVIGATION BORDERS === */
.dark-mode nav.border-b {
    border-bottom-color: rgba(55, 65, 81, 0.8) !important;
}

/* === DEFAULT BORDER CLASS (border without color) === */
.dark-mode section .border:not([class*="border-primary"]):not([class*="border-secondary"]):not([class*="border-accent"]):not([class*="border-success"]):not([class*="border-tertiary"]):not([class*="border-textSecondary"]) {
    border-color: #374151 !important;
}

/* === PRIMARY BORDER VARIANTS === */
/* border-primary/20 - Most common in design-system.html */
.dark-mode .border-primary\/20,
.dark-mode section .border-primary\/20,
.dark-mode .border.border-primary\/20,
.dark-mode section .border.border-primary\/20,
.dark-mode div.border.border-primary\/20,
.dark-mode .bg-primary\/10.border.border-primary\/20,
.dark-mode .bg-surface.border.border-primary\/20,
.dark-mode .bg-background.border.border-primary\/20,
.dark-mode .rounded-xl.border.border-primary\/20,
.dark-mode .color-swatch.border.border-primary\/20 {
    border-color: rgba(96, 165, 250, 0.3) !important;
}

/* border-primary/30 - Used in dashboard cards */
.dark-mode .border-primary\/30,
.dark-mode section .border-primary\/30,
.dark-mode .border.border-primary\/30,
.dark-mode section .border.border-primary\/30,
.dark-mode div.border.border-primary\/30,
.dark-mode .bg-gradient-to-br.border.border-primary\/30 {
    border-color: rgba(96, 165, 250, 0.4) !important;
}

/* border-primary/40 - Hover states */
.dark-mode .border-primary\/40,
.dark-mode .hover\:border-primary\/40:hover {
    border-color: rgba(96, 165, 250, 0.5) !important;
}

/* border-primary - Solid primary borders */
.dark-mode .border-primary,
.dark-mode section .border-primary {
    border-color: #60a5fa !important;
}

/* === ACCENT BORDER VARIANTS === */
.dark-mode .border-accent\/20,
.dark-mode section .border-accent\/20 {
    border-color: rgba(252, 211, 77, 0.3) !important;
}

.dark-mode .border-accent\/40,
.dark-mode section .border-accent\/40,
.dark-mode .border.border-accent\/40 {
    border-color: rgba(252, 211, 77, 0.4) !important;
}

/* === SUCCESS BORDER VARIANTS === */
.dark-mode .border-success\/20,
.dark-mode section .border-success\/20,
.dark-mode .border.border-success\/20 {
    border-color: rgba(110, 231, 183, 0.3) !important;
}

.dark-mode .border-success\/30,
.dark-mode section .border-success\/30,
.dark-mode .border.border-success\/30 {
    border-color: rgba(110, 231, 183, 0.4) !important;
}

/* === TERTIARY BORDER VARIANTS === */
.dark-mode .border-tertiary\/20,
.dark-mode section .border-tertiary\/20,
.dark-mode .border.border-tertiary\/20 {
    border-color: rgba(252, 211, 77, 0.3) !important;
}

.dark-mode .border-tertiary\/30,
.dark-mode section .border-tertiary\/30 {
    border-color: rgba(252, 211, 77, 0.4) !important;
}

/* === TEXT SECONDARY BORDERS === */
.dark-mode .border-textSecondary,
.dark-mode section .border-textSecondary {
    border-color: #9ca3af !important;
}

.dark-mode .border-textSecondary\/20,
.dark-mode section .border-textSecondary\/20,
.dark-mode .border.border-textSecondary\/20 {
    border-color: rgba(156, 163, 175, 0.3) !important;
}

/* === SECONDARY BORDERS === */
.dark-mode .border-secondary,
.dark-mode section .border-secondary {
    border-color: #6ee7b7 !important;
}

/* === OUTLINE BUTTONS WITH border-2 === */
.dark-mode button.border-2.border-primary,
.dark-mode .border-2.border-primary {
    border-color: #60a5fa !important;
    border-width: 2px !important;
}

.dark-mode button.border-2.border-primary:hover {
    border-color: #60a5fa !important;
    background-color: #60a5fa !important;
}

.dark-mode button.border-2.border-secondary,
.dark-mode .border-2.border-secondary {
    border-color: #6ee7b7 !important;
    border-width: 2px !important;
}

.dark-mode button.border-2.border-textSecondary,
.dark-mode .border-2.border-textSecondary {
    border-color: #9ca3af !important;
    border-width: 2px !important;
}

.dark-mode button.border-2.border-primary\/30,
.dark-mode .border-2.border-primary\/30 {
    border-color: rgba(96, 165, 250, 0.4) !important;
    border-width: 2px !important;
}

/* === FORM ELEMENT BORDERS === */
.dark-mode input.border.border-primary\/20,
.dark-mode select.border.border-primary\/20,
.dark-mode textarea.border.border-primary\/20 {
    border-color: rgba(96, 165, 250, 0.3) !important;
}

.dark-mode input:focus.border-primary,
.dark-mode select:focus.border-primary,
.dark-mode textarea:focus.border-primary {
    border-color: #60a5fa !important;
}

.dark-mode input.focus\:border-primary:focus,
.dark-mode select.focus\:border-primary:focus,
.dark-mode textarea.focus\:border-primary:focus {
    border-color: #60a5fa !important;
}

/* === CARD HOVER STATES === */
.dark-mode .hover\:border-primary\/40:hover,
.dark-mode section .hover\:border-primary\/40:hover {
    border-color: rgba(96, 165, 250, 0.5) !important;
}

/* === COLOR SWATCH SPECIFIC === */
.dark-mode .color-swatch {
    border-color: rgba(96, 165, 250, 0.3) !important;
}

.dark-mode .color-swatch:hover {
    border-color: rgba(96, 165, 250, 0.5) !important;
}

/* === COMPONENT DEMO BORDERS === */
.dark-mode .component-demo {
    border-color: #374151 !important;
}

/* === CODE BLOCK BORDERS === */
.dark-mode .code-block {
    border-color: #374151 !important;
}

/* === MOBILE MOCKUP BORDERS === */
.dark-mode .rounded-\[3rem\].border.border-primary\/20 {
    border-color: rgba(96, 165, 250, 0.3) !important;
}

/* === FOOTER BORDER === */
.dark-mode footer.border-t,
.dark-mode footer.border-t.border-primary\/20 {
    border-top-color: rgba(55, 65, 81, 0.8) !important;
}

/* === BORDER-B (bottom borders) === */
.dark-mode .border-b {
    border-bottom-color: #374151 !important;
}

.dark-mode .border-b.border-primary\/20 {
    border-bottom-color: rgba(96, 165, 250, 0.3) !important;
}

/* === BORDER-T (top borders) === */
.dark-mode .border-t {
    border-top-color: #374151 !important;
}

.dark-mode .border-t.border-primary\/20 {
    border-top-color: rgba(96, 165, 250, 0.3) !important;
}

/* === BORDER-L and BORDER-R === */
.dark-mode .border-l {
    border-left-color: #374151 !important;
}

.dark-mode .border-r {
    border-right-color: #374151 !important;
}

/* === ULTRA-SPECIFIC CATCHES FOR STUBBORN CASES === */
/* Catch any .border class that doesn't have a specific color modifier */
.dark-mode [class*="border"]:not([class*="rounded"]):not([class*="border-0"]):not([class*="border-none"]) {
    border-color: #374151 !important;
}

/* But override with specific colors when they exist */
.dark-mode [class*="border-primary/20"] {
    border-color: rgba(96, 165, 250, 0.3) !important;
}

.dark-mode [class*="border-primary/30"] {
    border-color: rgba(96, 165, 250, 0.4) !important;
}

.dark-mode [class*="border-primary/40"] {
    border-color: rgba(96, 165, 250, 0.5) !important;
}

.dark-mode [class*="border-accent/20"] {
    border-color: rgba(252, 211, 77, 0.3) !important;
}

.dark-mode [class*="border-accent/40"] {
    border-color: rgba(252, 211, 77, 0.4) !important;
}

.dark-mode [class*="border-success/20"] {
    border-color: rgba(110, 231, 183, 0.3) !important;
}

.dark-mode [class*="border-success/30"] {
    border-color: rgba(110, 231, 183, 0.4) !important;
}

.dark-mode [class*="border-tertiary/20"] {
    border-color: rgba(252, 211, 77, 0.3) !important;
}

.dark-mode [class*="border-textSecondary/20"] {
    border-color: rgba(156, 163, 175, 0.3) !important;
}

/* === FINAL CATCH-ALL WITH MAXIMUM SPECIFICITY === */
/* For any remaining borders that slip through */
.dark-mode body section .border,
.dark-mode body section div.border,
.dark-mode body div.border,
.dark-mode body .border {
    border-color: #374151 !important;
}

/* But ensure colored borders override the catch-all */
.dark-mode body [class*="border-primary"] {
    border-color: rgba(96, 165, 250, 0.3) !important;
}

.dark-mode body button[class*="border-2"][class*="border-primary"] {
    border-color: #60a5fa !important;
}

/* END OF DESIGN SYSTEM BORDER FIXES */

/* ============================================
   BOTÃO APOIADOR FUNDADOR - Dark Mode Fix
   ============================================ */
html.dark-mode body button.bg-accent[onclick*="openApoiador"] {
    background: linear-gradient(135deg, #fcd34d 0%, #fbbf24 100%) !important;
    color: #0a0e14 !important;
    font-weight: 800 !important;
}

html.dark-mode body button.bg-accent[onclick*="openApoiador"]:hover {
    background: linear-gradient(135deg, #fde68a 0%, #fcd34d 100%) !important;
    color: #0a0e14 !important;
}

html.dark-mode body button.bg-accent[onclick*="openApoiador"] i,
html.dark-mode body button.bg-accent[onclick*="openApoiador"] span {
    color: #0a0e14 !important;
}

/* Força máxima - sobrescreve Tailwind */
.dark-mode button[onclick*="openApoiador"].bg-accent.text-white,
.dark-mode button[onclick*="openApoiador"].bg-accent {
    color: #0a0e14 !important;
}

.dark-mode button[onclick*="openApoiador"].bg-accent.text-white *,
.dark-mode button[onclick*="openApoiador"].bg-accent * {
    color: #0a0e14 !important;
}

/* END OF ADDITIONAL DARK MODE ENHANCEMENTS */