/* ============================================================================
   Marcaí — Light Mode Contrast Enhancement
   ============================================================================
   
   Este arquivo melhora o contraste do white mode mantendo a estética editorial.
   
   Princípios aplicados:
   - Textos mais escuros para melhor legibilidade (slate-700/800 em vez de 400/500)
   - Bordas mais visíveis para definir hierarquia visual
   - Backgrounds com leve diferenciação de tom
   - Sombras sutis para criar profundidade
   - Manter a identidade visual: elegante, editorial, sofisticado
   
   ============================================================================ */

/* ============================================================================
   Base — Background e texto
   ============================================================================ */

/* Body base — levemente aquecido para não ser branco puro frio */
html:not(.dark) body {
    background-color: #FAFAFC;
    color: #1E1E2C;
}

/* Texto principal mais escuro para contraste */
html:not(.dark) .text-brand-text {
    color: #1E1E2C;
}

/* Textos secundários — cinza mais escuro para legibilidade */
html:not(.dark) .text-slate-400,
html:not(.dark) .text-slate-500 {
    color: #64748B;
}

html:not(.dark) .text-slate-600 {
    color: #475569;
}

/* ============================================================================
   Cards e Containers — Definição aprimorada
   ============================================================================ */

/* Cards em white mode — bordas mais visíveis */
html:not(.dark) .bg-white {
    background-color: #FFFFFF;
    border-color: #E2E8F0;
}

/* Slate-50 containers — diferenciação sutil */
html:not(.dark) .bg-slate-50,
html:not(.dark) [class*="bg-slate-50"] {
    background-color: #F1F5F9;
    border-color: #E2E8F0;
}

/* Slate-100 backgrounds — mais contraste */
html:not(.dark) .bg-slate-100,
html:not(.dark) [class*="bg-slate-100"] {
    background-color: #E2E8F0;
}

/* ============================================================================
   Bordas — Hierarquia visual clara
   ============================================================================ */

/* Bordas primárias — visíveis mas elegantes */
html:not(.dark) .border-slate-100,
html:not(.dark) [class*="border-slate-100"] {
    border-color: #E2E8F0;
}

html:not(.dark) .border-slate-200,
html:not(.dark) [class*="border-slate-200"] {
    border-color: #CBD5E1;
}

/* Bordas do brand — mais sutis */
html:not(.dark) [class*="border-brand-primary\/10"],
html:not(.dark) [class*="border-brand-primary/10"] {
    border-color: rgba(255, 90, 31, 0.2);
}

html:not(.dark) [class*="border-brand-primary\/15"],
html:not(.dark) [class*="border-brand-primary/15"] {
    border-color: rgba(255, 90, 31, 0.25);
}

/* ============================================================================
   Inputs e Formulários — Estados claros
   ============================================================================ */

/* Inputs — bordas mais definidas */
html:not(.dark) input:not([type="hidden"]),
html:not(.dark) select,
html:not(.dark) textarea {
    background-color: #FFFFFF;
    border-color: #CBD5E1;
    color: #1E1E2C;
}

/* Placeholder mais escuro para legibilidade */
html:not(.dark) input::placeholder,
html:not(.dark) textarea::placeholder {
    color: #94A3B8;
}

/* Input focus — brand color mais visível */
html:not(.dark) input:focus,
html:not(.dark) select:focus,
html:not(.dark) textarea:focus {
    border-color: #FF5A1F;
    box-shadow: 0 0 0 3px rgba(255, 90, 31, 0.15);
}

/* ============================================================================
   Botões — Estados distintos
   ============================================================================ */

/* Botão primário em white mode */
html:not(.dark) .btn-primary,
html:not(.dark) [class*="bg-brand-primary"] {
    background-color: #FF5A1F;
    color: #FFFFFF;
}

html:not(.dark) .btn-primary:hover,
html:not(.dark) [class*="bg-brand-primary"]:hover {
    background-color: #7A7ED0;
}

/* Botão secundário/ghost */
html:not(.dark) .btn-secondary,
html:not(.dark) .btn-ghost {
    background-color: #F1F5F9;
    border-color: #E2E8F0;
    color: #475569;
}

html:not(.dark) .btn-secondary:hover,
html:not(.dark) .btn-ghost:hover {
    background-color: #E2E8F0;
    color: #1E1E2C;
}

/* ============================================================================
   Sidebar — Definição e hierarquia
   ============================================================================ */

/* Sidebar background */
html:not(.dark) aside,
html:not(.dark) [id="sidebar"] {
    background-color: #FFFFFF;
    border-right-color: #E2E8F0;
}

/* Itens de menu */
html:not(.dark) aside a,
html:not(.dark) [id="sidebar"] a {
    color: #475569;
}

html:not(.dark) aside a:hover,
html:not(.dark) [id="sidebar"] a:hover {
    background-color: #F1F5F9;
    color: #1E1E2C;
}

/* Item ativo */
html:not(.dark) aside a.active,
html:not(.dark) [id="sidebar"] a.active {
    background-color: #EEF0FF;
    color: #6B6FBC;
    border-left-color: #FF5A1F;
}

/* ============================================================================
   Tabelas — Legibilidade aprimorada
   ============================================================================ */

/* Header da tabela */
html:not(.dark) thead,
html:not(.dark) th {
    background-color: #F8FAFC;
    color: #475569;
    border-bottom-color: #E2E8F0;
}

/* Linhas da tabela */
html:not(.dark) tbody tr {
    border-bottom-color: #F1F5F9;
}

html:not(.dark) tbody tr:hover {
    background-color: #FAFAFC;
}

/* Células */
html:not(.dark) td {
    color: #334155;
}

/* ============================================================================
   Status e Badges — Cores vibrantes mas elegantes
   ============================================================================ */

/* Badge padrão */
html:not(.dark) .badge,
html:not(.dark) [class*="rounded-full"][class*="px-"] {
    background-color: #F1F5F9;
    color: #475569;
    border-color: #E2E8F0;
}

/* Badge de sucesso */
html:not(.dark) .badge-success,
html:not(.dark) [class*="bg-emerald-50"] {
    background-color: #ECFDF5;
    color: #059669;
    border-color: #A7F3D0;
}

/* Badge de warning */
html:not(.dark) .badge-warning,
html:not(.dark) [class*="bg-amber-50"] {
    background-color: #FFFBEB;
    color: #D97706;
    border-color: #FDE68A;
}

/* Badge de erro */
html:not(.dark) .badge-error,
html:not(.dark) [class*="bg-red-50"] {
    background-color: #FEF2F2;
    color: #DC2626;
    border-color: #FECACA;
}

/* Badge de info/brand */
html:not(.dark) .badge-info,
html:not(.dark) [class*="bg-brand-50"],
html:not(.dark) [class*="bg-brand-primary\/10"] {
    background-color: #EEF0FF;
    color: #6B6FBC;
    border-color: #D4D6F5;
}

/* ============================================================================
   Glassmorphism — Ajustado para white mode
   ============================================================================ */

/* Efeito glass em white mode */
html:not(.dark) .glass,
html:not(.dark) [class*="backdrop-blur"] {
    background: rgba(255, 255, 255, 0.85);
    border-color: rgba(255, 90, 31, 0.15);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

/* ============================================================================
   Hover states — Interatividade clara
   ============================================================================ */

/* Hover em cards */
html:not(.dark) .hover\:bg-slate-50:hover,
html:not(.dark) [class*="hover:bg-slate-50"]:hover {
    background-color: #F1F5F9;
}

html:not(.dark) .hover\:bg-slate-100:hover,
html:not(.dark) [class*="hover:bg-slate-100"]:hover {
    background-color: #E2E8F0;
}

/* Hover em bordas */
html:not(.dark) .hover\:border-brand-primary:hover,
html:not(.dark) [class*="hover:border-brand"]:hover {
    border-color: #FF5A1F;
}

/* ============================================================================
   Utilitários específicos
   ============================================================================ */

/* Dividers */
html:not(.dark) hr,
html:not(.dark) .divider,
html:not(.dark) [class*="divide-slate"] > * + * {
    border-color: #E2E8F0;
}

/* Sombras sutis para criar profundidade */
html:not(.dark) .shadow-sm {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.04);
}

html:not(.dark) .shadow,
html:not(.dark) .shadow-md {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.03);
}

html:not(.dark) .shadow-lg {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.06), 0 4px 6px -4px rgba(0, 0, 0, 0.03);
}

/* Textos em fundos coloridos */
html:not(.dark) .text-white {
    color: #FFFFFF;
}

html:not(.dark) .text-white\/70,
html:not(.dark) .text-white\/80,
html:not(.dark) .text-white\/90 {
    color: rgba(255, 255, 255, 0.9);
}

/* Links */
html:not(.dark) a:not(.btn):not([class*="bg-"]) {
    color: #6B6FBC;
}

html:not(.dark) a:not(.btn):not([class*="bg-"]):hover {
    color: #5559A5;
}

/* ============================================================================
   Animações e transições — Mantidas suaves
   ============================================================================ */

/* Transições em elementos interativos */
html:not(.dark) a,
html:not(.dark) button,
html:not(.dark) input,
html:not(.dark) select,
html:not(.dark) textarea,
html:not(.dark) [class*="transition"] {
    transition-property: color, background-color, border-color, box-shadow;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

/* ============================================================================
   Landing page específicos
   ============================================================================ */

/* Gradientes mais vibrantes em white mode */
html:not(.dark) .bg-fluid-gradient {
    background: linear-gradient(135deg, #FF5A1F 0%, #F5A623 100%);
}

/* Hero background mais definido */
html:not(.dark) .landing-grain {
    background-color: #FAFAFC;
}

/* ============================================================================
   Focus visível — Acessibilidade
   ============================================================================ */

html:not(.dark) *:focus-visible {
    outline: 2px solid #FF5A1F;
    outline-offset: 2px;
}

html:not(.dark) *:focus:not(:focus-visible) {
    outline: none;
}

/* ============================================================================
   Booking pages — Contraste específico
   ============================================================================ */

/* Header de booking */
html:not(.dark) [class*="booking"] header,
html:not(.dark) header[class*="backdrop-blur"] {
    background: rgba(255, 255, 255, 0.9);
    border-bottom-color: #E2E8F0;
}

/* Cards de serviço */
html:not(.dark) .service-card,
html:not(.dark) [class*="service-card"] {
    background-color: #FFFFFF;
    border-color: #E2E8F0;
}

html:not(.dark) .service-card:hover,
html:not(.dark) [class*="service-card"]:hover {
    border-color: #FF5A1F;
    box-shadow: 0 4px 12px rgba(255, 90, 31, 0.15);
}

/* Cards de profissional */
html:not(.dark) .prof-card,
html:not(.dark) [class*="prof-card"] {
    background-color: #FFFFFF;
    border-color: #E2E8F0;
}

html:not(.dark) .prof-card:hover,
html:not(.dark) [class*="prof-card"]:hover {
    border-color: #FF5A1F;
    background-color: #FAFAFC;
}

/* ============================================================================
   Skeleton loading — Melhor visibilidade
   ============================================================================ */

html:not(.dark) .skeleton-loader {
    background: linear-gradient(90deg, #F1F5F9 25%, #E2E8F0 50%, #F1F5F9 75%);
    background-size: 200% 100%;
}

/* ============================================================================
   Scrollbar — Estilizada para white mode
   ============================================================================ */

html:not(.dark) ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

html:not(.dark) ::-webkit-scrollbar-track {
    background: #F1F5F9;
}

html:not(.dark) ::-webkit-scrollbar-thumb {
    background: #CBD5E1;
    border-radius: 4px;
}

html:not(.dark) ::-webkit-scrollbar-thumb:hover {
    background: #94A3B8;
}