@tailwind base;
@tailwind components;
@tailwind utilities;

[x-cloak] {
    display: none;
}

@layer base {
    .dark {
        color-scheme: dark;
    }

    .dark select,
    .dark textarea,
    .dark input:not([type='checkbox']):not([type='radio']):not([type='file']):not([type='hidden']) {
        @apply border-gray-600 bg-gray-800 text-gray-100;
        color-scheme: dark;
    }

    .dark select:focus,
    .dark textarea:focus,
    .dark input:not([type='checkbox']):not([type='radio']):not([type='file']):not([type='hidden']):focus {
        @apply border-diary-teal ring-diary-teal;
    }

    .dark select option {
        @apply bg-gray-800 text-gray-100;
    }

    .dark textarea::placeholder,
    .dark input::placeholder {
        @apply text-gray-400;
    }

    /*
     | Authenticated shell: Jetstream/product pages often use light-mode gray
     | utilities without dark: variants. Remap those inside .app-shell so text
     | and surfaces stay readable. Buttons keep their own classes.
     */
    .dark .app-shell :where(:not(button)):where(.text-gray-900),
    .dark .app-shell :where(:not(button)):where(.text-gray-800) {
        color: theme('colors.gray.100');
    }

    .dark .app-shell :where(:not(button)):where(.text-gray-700) {
        color: theme('colors.gray.200');
    }

    .dark .app-shell :where(:not(button)):where(.text-gray-600) {
        color: theme('colors.gray.300');
    }

    .dark .app-shell :where(:not(button)):where(.text-gray-500) {
        color: theme('colors.gray.400');
    }

    .dark .app-shell :where(:not(button)):where(.text-gray-400) {
        color: theme('colors.gray.400');
    }

    .dark .app-shell :where(.bg-white) {
        background-color: theme('colors.gray.900');
    }

    .dark .app-shell :where(.bg-gray-50),
    .dark .app-shell :where(.bg-gray-100),
    .dark .app-shell :where(.bg-gray-200) {
        background-color: theme('colors.gray.800');
    }

    .dark .app-shell :where(.border-gray-100),
    .dark .app-shell :where(.border-gray-200),
    .dark .app-shell :where(.border-gray-300) {
        border-color: theme('colors.gray.700');
    }

    .dark .app-shell :where(.divide-gray-100) > :not([hidden]) ~ :not([hidden]),
    .dark .app-shell :where(.divide-gray-200) > :not([hidden]) ~ :not([hidden]) {
        border-color: theme('colors.gray.700');
    }

    .dark .app-shell :where(.hover\:bg-gray-50):hover,
    .dark .app-shell :where(.hover\:bg-gray-100):hover {
        background-color: theme('colors.gray.800');
    }

    .dark .app-shell :where(.hover\:text-gray-700):hover,
    .dark .app-shell :where(.hover\:text-gray-800):hover,
    .dark .app-shell :where(.hover\:text-gray-900):hover {
        color: theme('colors.gray.100');
    }

    .dark .app-shell :where(.text-indigo-600) {
        color: theme('colors.diary.mist');
    }

    .dark .app-shell :where(.hover\:text-indigo-800):hover,
    .dark .app-shell :where(.hover\:text-indigo-900):hover {
        color: theme('colors.white');
    }

    .dark .app-shell :where(.text-diary-ink) {
        color: theme('colors.diary.mist');
    }
}

@layer components {
    .form-control {
        @apply mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-diary-teal focus:ring-diary-teal dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 dark:placeholder-gray-400;
    }

    .marketing-grid {
        background-image:
            linear-gradient(rgba(18, 38, 58, 0.04) 1px, transparent 1px),
            linear-gradient(90deg, rgba(18, 38, 58, 0.04) 1px, transparent 1px);
        background-size: 48px 48px;
    }

    .marketing-reveal {
        opacity: 0;
        transform: translateY(1.5rem);
        transition: opacity 0.7s ease, transform 0.7s ease;
    }

    .marketing-reveal.is-visible {
        opacity: 1;
        transform: translateY(0);
    }
}