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

@layer base {
    :root {
        /* Light Mode High-End Palette */
        --primary-50: 240, 245, 255;
        --primary-100: 224, 231, 255;
        --primary-400: 99, 102, 241;
        --primary-500: 79, 70, 229;
        --primary-600: 67, 56, 202;
        --primary-700: 55, 48, 163;
        --primary-800: 49, 46, 129;

        --bg-main: 248, 250, 252;
        /* Slate-50 */
        --bg-surface: 255, 255, 255;

        /* High Contrast Text for Light Mode */
        --text-main: 15, 23, 42;
        /* Slate-900 */
        --text-muted: 100, 116, 139;
        /* Slate-500 */
        --text-muted-light: 148, 163, 184;
        /* Slate-400 */
        --border-main: 226, 232, 240;
        /* Slate-200 */
        --border-light: 241, 245, 249;
        /* Slate-100 */

        /* Input & Interactive States */
        --input-bg: 255, 255, 255;
        --input-border: 203, 213, 225;
        /* Slate-300 */
        --input-focus: 79, 70, 229;

        /* Hover & Active States */
        --hover-bg: 241, 245, 249;
        /* Slate-100 */
        --active-bg: 226, 232, 240;
        /* Slate-200 */

        --sidebar-width: 280px;
    }

    .dark {
        /* Proper Dark Mode with Slate Tones */
        --bg-main: 15, 23, 42;
        /* Slate-900 - Better than pure black */
        --bg-surface: 30, 41, 59;
        /* Slate-800 */

        /* High Contrast Text for Dark Mode */
        --text-main: 248, 250, 252;
        /* Slate-50 */
        --text-muted: 148, 163, 184;
        /* Slate-400 */
        --text-muted-light: 203, 213, 225;
        /* Slate-300 */
        --border-main: 51, 65, 85;
        /* Slate-700 */
        --border-light: 71, 85, 105;
        /* Slate-600 */

        /* Vibrant Accents for Dark Mode visibility */
        --primary-400: 129, 140, 248;
        /* Indigo-400 */
        --primary-500: 99, 102, 241;
        /* Indigo-500 */
        --primary-600: 129, 140, 248;
        /* Indigo-400 for better text contrast */
        --primary-700: 165, 180, 252;
        /* Indigo-300 */

        /* Input & Interactive States for Dark Mode */
        --input-bg: 30, 41, 59;
        /* Slate-800 */
        --input-border: 71, 85, 105;
        /* Slate-600 */
        --input-focus: 129, 140, 248;

        /* Hover & Active States for Dark Mode */
        --hover-bg: 30, 41, 59;
        /* Slate-800 */
        --active-bg: 51, 65, 85;
        /* Slate-700 */
    }

    body {
        @apply transition-colors duration-300 antialiased selection:bg-indigo-500/30 selection:text-indigo-200;
        background-color: rgb(var(--bg-main));
        color: rgb(var(--text-main));
        font-family: 'Instrument Sans', 'Inter', sans-serif;
    }

    /* Enhanced Custom Scrollbar */
    ::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }

    ::-webkit-scrollbar-track {
        @apply bg-transparent;
    }

    ::-webkit-scrollbar-thumb {
        @apply bg-slate-300/60 dark:bg-slate-600/60 rounded-full hover:bg-slate-400 dark:hover:bg-slate-500 transition-colors;
    }

    ::-webkit-scrollbar-corner {
        @apply bg-transparent;
    }

    /* Premium Scrollbar for specific containers */
    .premium-scrollbar::-webkit-scrollbar {
        width: 6px;
        height: 6px;
    }

    .premium-scrollbar::-webkit-scrollbar-thumb {
        @apply bg-slate-200 dark:bg-slate-700 rounded-full hover:bg-slate-300 dark:hover:bg-slate-600;
    }
}

@layer components {

    /* Glassmorphism Utilities */
    .glass-panel {
        @apply bg-white dark:bg-slate-900 backdrop-blur-xl border border-slate-200 dark:border-slate-700 shadow-xl;
    }

    .glass-card {
        @apply bg-white dark:bg-slate-800 backdrop-blur-md border border-slate-200 dark:border-slate-700 shadow-sm transition-all duration-300;
    }

    .glass-button {
        @apply bg-white dark:bg-slate-700 hover:bg-slate-50 dark:hover:bg-slate-600 backdrop-blur-md border border-slate-200 dark:border-slate-600 transition-all active:scale-95;
    }

    /* Enhanced Input Styles */
    .input-field {
        @apply w-full rounded-2xl border-2 border-main bg-white dark:bg-slate-800 text-main placeholder:text-muted focus:ring-0 focus:border-primary-500 transition-all duration-300;
    }

    .input-field-sm {
        @apply input-field text-sm py-2.5 px-4;
    }

    .input-field-md {
        @apply input-field text-base py-3.5 px-5;
    }

    .input-field-lg {
        @apply input-field text-lg py-4 px-5;
    }

    /* Button Variants */
    .btn-primary {
        @apply px-6 py-3 bg-primary-600 hover:bg-primary-700 text-white font-bold rounded-2xl shadow-lg transition-all duration-300 hover:-translate-y-0.5 active:scale-95;
    }

    .btn-secondary {
        @apply px-6 py-3 bg-white dark:bg-slate-700 hover:bg-slate-50 dark:hover:bg-slate-600 text-main font-bold rounded-2xl border border-main transition-all duration-300 active:scale-95;
    }

    .btn-ghost {
        @apply px-4 py-2 text-muted hover:text-main hover:bg-slate-100 dark:hover:bg-slate-800 rounded-xl transition-all duration-300;
    }

    /* Typographic Helpers */
    .heading-gradient {
        @apply bg-clip-text text-transparent bg-gradient-to-r from-slate-900 to-slate-600 dark:from-white dark:to-slate-400;
    }

    .text-balance {
        text-wrap: balance;
    }

    /* Mobile Responsive Utilities */
    .touch-scroll {
        -webkit-overflow-scrolling: touch;
        @apply overflow-x-auto snap-x snap-mandatory;
    }

    /* Card Styles */
    .card-base {
        @apply bg-surface/80 dark:bg-slate-900/80 backdrop-blur-md border border-main rounded-2xl shadow-sm transition-all duration-300;
    }

    .card-hover {
        @apply card-base hover:shadow-xl hover:shadow-primary-500/10 hover:-translate-y-1 hover:border-primary-500/30;
    }

    /* Badge Styles */
    .badge {
        @apply inline-flex items-center px-3 py-1 rounded-lg text-xs font-bold uppercase tracking-wider;
    }

    .badge-primary {
        @apply badge bg-primary-50 dark:bg-primary-500/10 text-primary-600 dark:text-primary-400 border border-primary-500/20;
    }

    .badge-success {
        @apply badge bg-emerald-50 dark:bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 border border-emerald-500/20;
    }

    .badge-warning {
        @apply badge bg-amber-50 dark:bg-amber-500/10 text-amber-600 dark:text-amber-400 border border-amber-500/20;
    }

    .badge-danger {
        @apply badge bg-red-50 dark:bg-red-500/10 text-red-600 dark:text-red-400 border border-red-500/20;
    }
}

@layer utilities {
    .text-glow {
        text-shadow: 0 0 15px rgba(99, 102, 241, 0.5);
    }

    .text-glow-sm {
        text-shadow: 0 0 8px rgba(99, 102, 241, 0.3);
    }

    .no-scrollbar::-webkit-scrollbar {
        display: none;
    }

    .no-scrollbar {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    /* Smooth Transitions */
    .transition-smooth {
        @apply transition-all duration-300 ease-in-out;
    }

    .transition-fast {
        @apply transition-all duration-150 ease-in-out;
    }

    /* Touch Target Helpers */
    .touch-target {
        @apply min-w-[44px] min-h-[44px] flex items-center justify-center;
    }

    /* Safe Area Padding for Mobile */
    .safe-top {
        padding-top: env(safe-area-inset-top);
    }

    .safe-bottom {
        padding-bottom: env(safe-area-inset-bottom);
    }

    .safe-left {
        padding-left: env(safe-area-inset-left);
    }

    .safe-right {
        padding-right: env(safe-area-inset-right);
    }

    /* Rich Editor Styles */
    .ProseMirror {
        @apply min-h-[200px] outline-none;
    }

    .ProseMirror p.is-editor-empty:first-child::before {
        @apply text-slate-400 dark:text-slate-500 float-left h-0 pointer-events-none;
        content: attr(data-placeholder);
    }

    .ProseMirror ul {
        @apply list-disc ml-4 space-y-1;
    }

    .ProseMirror ol {
        @apply list-decimal ml-4 space-y-1;
    }

    .ProseMirror h1 {
        @apply text-2xl font-black mb-4;
    }

    .ProseMirror h2 {
        @apply text-xl font-bold mb-3;
    }

    .ProseMirror h3 {
        @apply text-lg font-bold mb-2;
    }

    .ProseMirror [data-type="taskList"] {
        @apply list-none p-0;
    }

    .ProseMirror [data-type="taskItem"] {
        @apply flex items-start gap-2 mb-1;
    }

    .ProseMirror [data-type="taskItem"]>label {
        @apply mt-1;
    }

    .ProseMirror [data-type="taskItem"]>div {
        @apply flex-1;
    }

    .ProseMirror pre {
        @apply bg-slate-900 text-slate-50 p-4 rounded-xl font-mono text-sm overflow-x-auto my-4;
    }

    .ProseMirror blockquote {
        @apply border-l-4 border-primary-500 pl-4 italic my-4;
    }

    .ProseMirror table {
        @apply border-collapse table-fixed w-full overflow-hidden border border-slate-200 dark:border-slate-700 my-4;
    }

    .ProseMirror th,
    .ProseMirror td {
        @apply border border-slate-200 dark:border-slate-700 p-2 text-left align-top min-w-[100px];
    }

    .ProseMirror th {
        @apply bg-slate-50 dark:bg-slate-800 font-bold;
    }

    /* Notion Style UI Polishes */
    .notion-property-label {
        @apply flex items-center gap-2 text-slate-400 dark:text-slate-500 font-medium text-xs;
    }

    .notion-property-value {
        @apply hover:bg-slate-100 dark:hover:bg-slate-900 px-2 py-1 rounded transition-colors cursor-pointer text-slate-700 dark:text-slate-300;
    }

    .notion-block-menu-item {
        @apply flex items-center gap-3 w-full px-3 py-2 rounded-xl hover:bg-slate-50 dark:hover:bg-slate-800 transition-all text-left;
    }

    .notion-block-icon {
        @apply w-8 h-8 rounded flex items-center justify-center font-bold text-xs;
    }
}