/* Sans-serif font enforcement & H1 non-bold styling */
body, h2, h3, h4, h5, h6, button, input, select, textarea {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
    letter-spacing: -0.01em;
}

h1 {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
    font-weight: 500 !important;
    letter-spacing: -0.01em;
}

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

.animate-spin-slow {
    animation: spinSlow 30s linear infinite;
}

/* 3D Flip Card Utilities & Tarot Layout */
.perspective-1200 {
    perspective: 1200px;
    -webkit-perspective: 1200px;
}
.transform-style-3d {
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
}
.backface-hidden {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}
.rotate-y-180 {
    transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
}
.rotate-y-0 {
    transform: rotateY(0deg);
    -webkit-transform: rotateY(0deg);
}

/* Explicit Tarot Card Dimensions (Guarantees card never collapses to 0 height) */
.tarot-stage {
    width: 290px;
    height: 460px;
    max-width: 90vw;
    perspective: 1200px;
    -webkit-perspective: 1200px;
    position: relative;
    margin: 0 auto;
}
.tarot-inner {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 1.5rem;
}
.tarot-face {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    overflow: hidden;
    box-sizing: border-box;
    border-radius: 1.5rem;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.3);
    border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(148, 163, 184, 0.5);
}

/* Explicit Progress Bar & Element Color Utilities (Guarantees visible bars in all environments) */
.bg-pink-500 { background-color: #ec4899 !important; }
.bg-sky-500 { background-color: #0284c7 !important; }
.bg-indigo-500 { background-color: #6366f1 !important; }
.bg-rose-500 { background-color: #f43f5e !important; }
.bg-amber-500 { background-color: #f59e0b !important; }
.bg-emerald-500 { background-color: #10b981 !important; }
.bg-purple-500 { background-color: #a855f7 !important; }
.bg-blue-500 { background-color: #3b82f6 !important; }
.bg-orange-500 { background-color: #f97316 !important; }

/* Dark, eye-friendly table borders */
table tr, table th, table td {
    border-color: rgba(255, 255, 255, 0.08) !important;
}
table thead tr {
    border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}
tbody.divide-y > tr, table tbody tr {
    border-bottom-color: rgba(255, 255, 255, 0.06) !important;
}

/* ==============================================================================
   LIGHT THEME CONTRAST & READABILITY OVERRIDES
   Ensures 100% readability without pale/faded text
   ============================================================================== */
html:not(.dark) body {
    background-color: #F8FAFC !important;
    color: #0F172A !important;
}

html:not(.dark) header,
html:not(.dark) footer {
    background-color: rgba(255, 255, 255, 0.95) !important;
    border-color: #CBD5E1 !important;
    color: #0F172A !important;
}

html:not(.dark) .bg-slate-900\/80,
html:not(.dark) .bg-slate-900\/90,
html:not(.dark) .bg-slate-900 {
    background-color: #FFFFFF !important;
    border-color: #CBD5E1 !important;
    color: #0F172A !important;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06) !important;
}

html:not(.dark) .text-white {
    color: #0F172A !important;
}

html:not(.dark) .text-slate-300,
html:not(.dark) .text-slate-400 {
    color: #334155 !important;
}

html:not(.dark) .text-amber-300,
html:not(.dark) .text-amber-400 {
    color: #B45309 !important;
}

html:not(.dark) .bg-white\/5,
html:not(.dark) .bg-white\/10 {
    background-color: #F1F5F9 !important;
    border-color: #E2E8F0 !important;
    color: #0F172A !important;
}

html:not(.dark) .border-white\/10,
html:not(.dark) .border-white\/20 {
    border-color: #CBD5E1 !important;
}

html:not(.dark) input,
html:not(.dark) select,
html:not(.dark) textarea {
    background-color: #FFFFFF !important;
    border-color: #94A3B8 !important;
    color: #0F172A !important;
}

html:not(.dark) input:focus,
html:not(.dark) select:focus,
html:not(.dark) textarea:focus {
    border-color: #D97706 !important;
    box-shadow: 0 0 0 2px rgba(217, 119, 6, 0.2) !important;
}

/* Tarot & Action Buttons Guaranteed Inner Padding */
#tarotRandomBtn,
#tarotFlipBtn,
.tarot-btn,
.btn-horoscope-open,
#openHoroscopeBtn,
.btn-day-tab,
.btn-action-primary {
    padding-left: 1.75rem !important;
    padding-right: 1.75rem !important;
    padding-top: 0.65rem !important;
    padding-bottom: 0.65rem !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
}

.btn-day-tab {
    padding-left: 2.25rem !important;
    padding-right: 2.25rem !important;
    padding-top: 0.65rem !important;
    padding-bottom: 0.65rem !important;
}

/* Conflict bar guaranteed visibility */
.conflict-bar {
    min-height: 10px !important;
    height: 100% !important;
    background-color: #f97316 !important;
    background: linear-gradient(90deg, #10b981 0%, #f59e0b 50%, #ef4444 100%) !important;
    border-radius: 9999px !important;
}