@import 'tailwindcss';
@import 'primeicons/primeicons.css';

/* Content sources voor Tailwind v4 */
@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@source '../../storage/framework/views/*.php';
@source '../**/*.blade.php';
@source '../**/*.js';
@source '../**/*.vue';
@source '../../node_modules/primevue/**/*.{vue,js,ts,jsx,tsx}';

@font-face {
    src: url('/fonts/Ubuntu-Regular.woff2') format('woff2');
    font-family: 'Ubuntu';
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    src: url('/fonts/Ubuntu-Medium.woff2') format('woff2');
    font-family: 'Ubuntu';
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    src: url('/fonts/Optima.woff2') format('woff2');
    font-family: 'Optima';
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    src: url('/fonts/OoohBaby-Regular.woff2') format('woff2');
    font-family: 'OoohBaby';
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* Custom theme configuration */
@theme {
    --font-sans: 'Ubuntu', 'Instrument Sans', ui-sans-serif, system-ui, sans-serif;
    --font-serif: 'Optima', ui-serif, Georgia, serif;
    --font-mono: ui-monospace, 'Cascadia Code', 'Source Code Pro', monospace;
    --font-display: 'OoohBaby', cursive;

    /* Je custom kleuren - verplaatst van tailwind.config.js */
    --color-bondi-blue: #00a3b1;
    --color-spring-wood: #f9f6f4;
    --color-mine-shaft: #333;
    --color-mine-shaft-2: #222;
    --color-downy: #65c3cb;
    --color-iceberg: #e5f6f7;
    --color-aqua-haze: #ebf4f4;
    --color-dawn-pink: #f4edea;
    --color-gallery: #eeeeee;
    --color-alto: #dddddd;
    --color-cod-gray: #1d1b19;
    --color-daintree: #01252e;
    --color-silver-chalice: #adadad;

    --color-partly-reserved: #fa9c1d;
    --color-reserved: #f8535f;
    --color-carbon: #000;
    --color-milk: #fff;

    /* Portugal kleuren die je al had */
    --color-portugal-blue: #003f7f;
    --color-portugal-gold: #ffcc00;
    --color-portugal-green: #006633;
}


/* Custom component styles */
@layer components {
    .login-container {
        @apply min-h-screen flex items-center justify-center bg-gray-50 py-12 px-4 sm:px-6 lg:px-8;
    }

    .login-card {
        @apply max-w-md w-full space-y-8;
    }

    .form-field {
        @apply space-y-1;
    }

    .form-label {
        @apply block text-sm font-medium text-gray-700;
    }

    .form-error {
        @apply mt-1 text-sm text-red-600;
    }
}

/* Custom utilities */
@layer utilities {
    .text-shadow {
        text-shadow: 0 2px 4px rgba(0,0,0,0.10);
    }

    .text-shadow-lg {
        text-shadow: 0 4px 8px rgba(0,0,0,0.15);
    }

    .portugal-gradient {
        background: linear-gradient(135deg, var(--color-portugal-blue), var(--color-portugal-green));
    }
}

/* PrimeVue overrides om goed samen te werken met Tailwind v4 */
@layer components {
    /* Zorg dat PrimeVue componenten goed werken met Tailwind */
    .p-button {
        @apply transition-all duration-200;
    }

    .p-inputtext {
        @apply transition-colors duration-200;
    }

    .p-dropdown {
        @apply transition-colors duration-200;
    }
}

.app-background {
    background-image: url('/images/kidneys_footer.svg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}