/* Base font */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Logo SVG color inheritance with enhanced saturation and punchier darkness */
.text-primary svg,
.text-primary img[src*="bizily"] {
    color: hsl(var(--hue-primary), calc(var(--sat-primary) + 30%), calc(var(--light-interactive) - 15%));
}

.text-white svg,
.text-white img[src*="bizily"] {
    color: white;
}

/* Alternative approach for even punchier logo colors */
.logo-punchy svg,
.logo-punchy img[src*="bizily"] {
    color: hsl(var(--hue-primary), 90%, 25%);
}

/* Dark mode logo adjustments - brighter and more saturated for visibility */
.dark .text-primary svg,
.dark .text-primary img[src*="bizily"] {
    color: hsl(var(--hue-primary), calc(var(--sat-primary) + 25%), calc(var(--light-interactive) + 5%));
}

/* Dark mode transitions */
html.dark * {
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

/* Custom transitions */
.slide-fade-enter-active,
.slide-fade-leave-active {
    transition: all 0.25s ease;
}

.slide-fade-enter-from,
.slide-fade-leave-to {
    transform: translateX(-15px);
    opacity: 0;
}

/* Custom focus styles */
.focus-ring:focus {
    @apply outline-none ring ring-ring-focus ring-opacity-40;
}

/* Custom scrollbar - Light Mode */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: hsl(var(--hue-neutral), var(--sat-neutral), 90%);
}

::-webkit-scrollbar-thumb {
    background: hsl(var(--hue-neutral), var(--sat-neutral), 70%);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: hsl(var(--hue-primary), var(--sat-primary), var(--light-interactive));
}

/* Custom scrollbar - Dark Mode */
.dark ::-webkit-scrollbar-track {
    background: hsl(var(--hue-neutral), var(--sat-neutral), 30%);
}

.dark ::-webkit-scrollbar-thumb {
    background: hsl(var(--hue-neutral), var(--sat-neutral), 45%);
}

.dark ::-webkit-scrollbar-thumb:hover {
    background: hsl(var(--hue-primary), var(--sat-primary), var(--light-interactive));
}

/* Dark mode specific overrides using semantic colors */
.dark .bg-white {
    background-color: hsl(var(--hue-neutral), var(--sat-neutral), var(--light-surface)) !important;
}

.dark .bg-page {
    background-color: hsl(var(--hue-neutral), var(--sat-neutral), var(--light-page)) !important;
}

.dark .bg-subtle {
    background-color: hsl(var(--hue-neutral), calc(var(--sat-neutral) - 5%), calc(var(--light-subtle) - 3%)) !important;
}

.dark .border-default {
    border-color: hsl(var(--hue-neutral), var(--sat-neutral), 30%) !important;
}

.dark .text-default {
    color: hsl(var(--hue-neutral), 10%, var(--light-default)) !important;
}

.dark .text-muted {
    color: hsl(var(--hue-neutral), 10%, var(--light-muted)) !important;
}

/* Button states in dark mode - using semantic colors */
.dark button:not(.bg-interactive):not(.bg-success):not(.bg-warning):not(.bg-error), 
.dark .btn:not(.bg-interactive):not(.bg-success):not(.bg-warning):not(.bg-error) {
    /* Ensure buttons have good contrast in dark mode using our semantic color system */
    background-color: hsl(var(--hue-neutral), var(--sat-neutral), var(--light-subtle)) !important;
    color: hsl(var(--hue-neutral), 10%, var(--light-default)) !important;
    border-color: hsl(var(--hue-neutral), var(--sat-neutral), calc(var(--light-subtle) - 10%)) !important;
}

/* Ensure interactive elements maintain visibility in dark mode */
.dark .bg-interactive {
    background-color: hsl(var(--hue-primary), var(--sat-primary), var(--light-interactive)) !important;
}

.dark .text-interactive {
    color: hsl(var(--hue-primary), var(--sat-primary), var(--light-interactive)) !important;
}

/* Non-active states for toggle elements and buttons */
.dark .inactive-element,
.dark .non-active-toggle {
    background-color: hsl(var(--hue-neutral), var(--sat-neutral), 30%) !important;
    color: hsl(var(--hue-neutral), 5%, var(--light-default)) !important;
    border-color: hsl(var(--hue-neutral), var(--sat-neutral), 40%) !important;
}

/* Form controls in dark mode using semantic colors */
.dark input,
.dark select,
.dark textarea {
    background-color: hsl(var(--hue-neutral), calc(var(--sat-neutral) - 5%), var(--light-page)) !important;
    border-color: hsl(var(--hue-neutral), var(--sat-neutral), calc(var(--light-subtle) - 10%)) !important;
    color: hsl(var(--hue-neutral), 10%, var(--light-default)) !important;
}

/* Table styles in dark mode using semantic colors */
.dark .bg-subtle.table-header,
.dark table th {
    background-color: hsl(var(--hue-neutral), var(--sat-neutral), calc(var(--light-subtle) - 8%)) !important;
}

.dark table tr:hover,
.dark .table-row-hover:hover {
    background-color: hsl(var(--hue-neutral), var(--sat-neutral), calc(var(--light-page) + 5%)) !important;
}

/* Table styles */
.table-row-clickable {
    cursor: pointer;
    transition: background-color 0.15s ease;
}

/* Contact checkbox styling */
.contact-checkbox {
    @apply h-4 w-4 rounded border-gray-300 text-primary focus:ring-primary;
}

/* Checkbox hover effect */
.contact-checkbox:hover {
    @apply cursor-pointer;
}

/* Contact list item hover */
.contact-list-item:hover {
    @apply bg-gray-50;
}

/* Quill editor customizations */
.ql-editor {
    @apply min-h-[200px] max-h-[400px] overflow-y-auto;
}

/* Email template variable token styling */
.ql-variable {
    @apply bg-interactive bg-opacity-15 text-interactive rounded px-1 mx-0.5 whitespace-nowrap inline-block font-mono;
}

/* Dark mode support is handled by Tailwind classes */