@import 'tailwindcss';
@plugin '@tailwindcss/forms';
@plugin '@tailwindcss/typography';
@plugin '@tailwindcss/container-queries';

@source '../views/**/*.blade.php';
@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@source '../../storage/framework/views/*.php';

@theme {
    --font-sans: 'Plus Jakarta Sans', 'Instrument Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
    --font-body: 'Manrope', ui-sans-serif, system-ui, sans-serif;
    --font-display-lg: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
    --font-headline-lg: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
    --font-headline-md: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
    --font-headline-lg-mobile: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
    --font-body-lg: 'Manrope', ui-sans-serif, system-ui, sans-serif;
    --font-body-md: 'Manrope', ui-sans-serif, system-ui, sans-serif;
    --font-label-md: 'Manrope', ui-sans-serif, system-ui, sans-serif;
    --font-label-sm: 'Manrope', ui-sans-serif, system-ui, sans-serif;

    --color-primary: #4F378A;
    --color-primary-50: #F5F3FF;
    --color-primary-100: #EDE9FE;
    --color-primary-200: #DDD6FE;
    --color-primary-300: #C4B5FD;
    --color-primary-400: #A78BFA;
    --color-primary-500: #8B5CF6;
    --color-primary-600: #6750A4;
    --color-primary-700: #4F378A;
    --color-primary-800: #3C2869;
    --color-primary-900: #2A1A4C;

    --color-amber-gold: #F59E0B;
    --color-amber-gold-hover: #D97706;
    --color-amber-gold-light: #FEF3C7;
    --color-amberGold: #F59E0B;
    --color-amberGold-hover: #D97706;
    --color-amberGold-light: #FEF3C7;

    --color-emerald-wellness: #059669;
    --color-emerald-wellness-50: #ECFDF5;
    --color-emerald-wellness-100: #D1FAE5;
    --color-emerald-wellness-600: #059669;
    --color-emerald-wellness-700: #047857;
    --color-emeraldWellness: #059669;
    --color-emeraldWellness-50: #ECFDF5;
    --color-emeraldWellness-100: #D1FAE5;
    --color-emeraldWellness-600: #059669;
    --color-emeraldWellness-700: #047857;

    --color-surface-tint: #6750a4;
    --color-tertiary-fixed: #ffdf93;
    --color-surface-container-lowest: #ffffff;
    --color-on-background: #1d1b20;
    --color-surface: #fdf7ff;
    --color-outline-variant: #cbc4d2;
    --color-on-error: #ffffff;
    --color-on-surface-variant: #494551;
    --color-on-tertiary: #ffffff;
    --color-error: #ba1a1a;
    --color-surface-variant: #e6e0e9;
    --color-on-primary-container: #e0d2ff;
    --color-on-tertiary-fixed: #241a00;
    --color-on-tertiary-container: #503d00;
    --color-on-primary-fixed-variant: #4f378a;
    --color-on-primary-fixed: #22005d;
    --color-surface-container-low: #f8f2fa;
    --color-primary-fixed: #e9ddff;
    --color-surface-container-highest: #e6e0e9;
    --color-tertiary-container: #c9a74d;
    --color-surface-dim: #ded8e0;
    --color-on-primary: #ffffff;
    --color-secondary: #63597c;
    --color-primary-fixed-dim: #cfbcff;
    --color-on-tertiary-fixed-variant: #594400;
    --color-surface-bright: #fdf7ff;
    --color-on-secondary-container: #645a7d;
    --color-inverse-primary: #cfbcff;
    --color-tertiary: #765b00;
    --color-on-surface: #1d1b20;
    --color-secondary-fixed: #e9ddff;
    --color-error-container: #ffdad6;
    --color-tertiary-fixed-dim: #e7c365;
    --color-outline: #7a7582;
    --color-surface-container-high: #ece6ee;
    --color-primary-container: #6750a4;
    --color-surface-container: #f2ecf4;
    --color-on-secondary: #ffffff;
    --color-on-error-container: #93000a;
    --color-background: #fdf7ff;
    --color-secondary-fixed-dim: #cdc0e9;
    --color-inverse-surface: #322f35;
    --color-secondary-container: #e1d4fd;
    --color-on-secondary-fixed: #1f1635;
    --color-on-secondary-fixed-variant: #4b4263;
    --color-inverse-on-surface: #f5eff7;

    --spacing-gutter: 16px;
    --spacing-container-margin: 16px;

    --text-headline-lg-mobile: 24px;
    --text-headline-md: 20px;
    --text-body-lg: 18px;
    --text-display-lg: 40px;
    --text-label-sm: 12px;
    --text-label-md: 14px;
    --text-headline-lg: 32px;
    --text-body-md: 16px;
}

@layer utilities {
    .u-cut {
        position: relative;
        display: inline-block;
        -webkit-clip-path: polygon(0 0, 70% 0, 100% 28%, 100% 100%, 0 100%);
        clip-path: polygon(0 0, 70% 0, 100% 28%, 100% 100%, 0 100%);
    }
    .brand-reveal {
        animation: floatUp 1.2s cubic-bezier(.2, .8, .2, 1) forwards;
    }
    @keyframes floatUp {
        0% { opacity: 0; transform: translateY(15px); }
        100% { opacity: 1; transform: translateY(0); }
    }
    .hide-scrollbar {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
    .hide-scrollbar::-webkit-scrollbar {
        display: none;
    }
    .icon-fill-1 {
        font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    }
    .icon-fill-0 {
        font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    }
    .custom-date-input::-webkit-calendar-picker-indicator {
        background: transparent;
        bottom: 0;
        color: transparent;
        cursor: pointer;
        height: auto;
        left: 0;
        position: absolute;
        right: 0;
        top: 0;
        width: auto;
    }
    .custom-select-input {
        -webkit-appearance: none !important;
        -moz-appearance: none !important;
        appearance: none !important;
        background-image: none !important;
    }
    .custom-select-input::-ms-expand {
        display: none;
    }

    .custom-gradient {
        background: linear-gradient(135deg, #6750a4 0%, #4f378a 100%);
    }

    .bg-amber-gradient {
        background: linear-gradient(135deg, #E8A838 0%, #D97706 100%);
    }

    .premium-gradient {
        background: linear-gradient(135deg, #4f378a 0%, #6750a4 100%);
    }

    .ios-shadow {
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    }

    .animate-fade-in {
        animation: fadeIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    }

    .bottom-nav-blur {
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        background-color: rgba(255, 255, 255, 0.9);
    }

    .va-number {
        letter-spacing: 0.05em;
    }

    .accordion-content {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease-out;
    }

    .accordion-open .accordion-content {
        max-height: 500px;
    }

    .accordion-open .arrow-icon {
        transform: rotate(180deg);
    }

    .success-overlay {
        backdrop-filter: blur(8px);
        background-color: rgba(29, 27, 32, 0.6);
    }

    .copy-success-toast {
        transform: translateY(100px);
        transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }

    .copy-success-toast.active {
        transform: translateY(0);
    }

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

    .animate-pulse-primary {
        animation: pulse-soft 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    }
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes pulse-soft {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.85; transform: scale(1.02); }
}