@import 'tailwindcss';

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

@theme {
    --font-sans: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
        'Segoe UI Symbol', 'Noto Color Emoji';

    /* ================================================================ */
    /* BRAND — Azul Mangolê (20% do ecrã)                              */
    /* ================================================================ */
    --color-brand: #00477d;
    --color-brand-50: #e6f0fa;
    --color-brand-100: #cce1f5;
    --color-brand-200: #99c3eb;
    --color-brand-300: #66a5e0;
    --color-brand-400: #3387d6;
    --color-brand-500: #006ba8;
    --color-brand-600: #00477d;
    --color-brand-700: #003366;
    --color-brand-800: #00264d;
    --color-brand-900: #001a36;

    /* ================================================================ */
    /* ACCENT — Amarelo (7% do ecrã)                                    */
    /* ================================================================ */
    --color-accent: #ffcc00;
    --color-accent-50: #fffceb;
    --color-accent-100: #fff5c5;
    --color-accent-200: #ffeb85;
    --color-accent-300: #ffdb46;
    --color-accent-400: #ffcc00;
    --color-accent-500: #f5b700;
    --color-accent-600: #d99000;
    --color-accent-700: #b46700;

    /* ================================================================ */
    /* DANGER — Vermelho (3% do ecrã)                                   */
    /* ================================================================ */
    --color-danger: #e30613;
    --color-danger-50: #fef2f2;
    --color-danger-100: #fee2e2;
    --color-danger-200: #fecaca;
    --color-danger-300: #fca5a5;
    --color-danger-400: #f87171;
    --color-danger-500: #ef4444;
    --color-danger-600: #e30613;
    --color-danger-700: #b91c1c;

    /* ================================================================ */
    /* SURFACE — Superfícies claras (70% do ecrã)                       */
    /* ================================================================ */
    --color-surface: #ffffff;
    --color-surface-secondary: #f9fafb;
    --color-surface-tertiary: #f3f4f6;

    /* ================================================================ */
    /* TEXT — Escala semântica                                          */
    /* ================================================================ */
    --color-text-primary: #111827;
    --color-text-secondary: #6b7280;
    --color-text-tertiary: #9ca3af;
    --color-text-muted: #d1d5db;
    --color-text-placeholder: #9ca3af;
    --color-text-on-brand: #ffffff;
    --color-text-on-accent: #002d5c;
    --color-text-on-danger: #ffffff;

    /* ================================================================ */
    /* BORDER — Escala semântica                                        */
    /* ================================================================ */
    --color-border-light: #f3f4f6;
    --color-border-default: #e5e7eb;
    --color-border-hover: #d1d5db;

    /* ================================================================ */
    /* BORDER RADIUS                                                    */
    /* ================================================================ */
    --radius-card: 0.75rem;
    --radius-card-lg: 1rem;
    --radius-button: 0.75rem;
    --radius-button-sm: 0.5rem;
    --radius-badge: 9999px;
    --radius-icon: 0.75rem;
    --radius-icon-lg: 1rem;

    /* ================================================================ */
    /* SHADOWS                                                          */
    /* ================================================================ */
    --shadow-card: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-card-hover: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-elevated: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --shadow-button: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);

    /* ================================================================ */
    /* SECTION SPACING                                                  */
    /* ================================================================ */
    --spacing-section-y: 5rem;
    --spacing-section-y-lg: 7rem;
}

/* ================================================================ */
/* SEMANTIC UTILITIES                                               */
/* ================================================================ */

@utility section-padding {
    padding-top: var(--spacing-section-y);
    padding-bottom: var(--spacing-section-y);
    @media (width >= 64rem) {
        padding-top: var(--spacing-section-y-lg);
        padding-bottom: var(--spacing-section-y-lg);
    }
}

@utility section-padding {
    padding-top: var(--spacing-section-y);
    padding-bottom: var(--spacing-section-y);
    @media (width >= 64rem) {
        padding-top: var(--spacing-section-y-lg);
        padding-bottom: var(--spacing-section-y-lg);
    }
}

@utility section-badge {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-brand);
}

@utility link-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-brand);
    transition: color var(--default-transition-duration, 200ms) ease-out;
    &:hover {
        color: var(--color-brand-700);
    }
}

/* Custom radius utilities (not auto-generated for arbitrary names) */
@utility rounded-card {
    border-radius: var(--radius-card);
}
@utility rounded-card-lg {
    border-radius: var(--radius-card-lg);
}
@utility rounded-button {
    border-radius: var(--radius-button);
}
@utility rounded-button-sm {
    border-radius: var(--radius-button-sm);
}
@utility rounded-badge {
    border-radius: var(--radius-badge);
}
@utility rounded-icon {
    border-radius: var(--radius-icon);
}
@utility rounded-icon-lg {
    border-radius: var(--radius-icon-lg);
}

@keyframes marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.animate-marquee {
    display: flex;
    width: max-content;
    animation: marquee 30s linear infinite;
}

.animate-marquee:hover {
    animation-play-state: paused;
}

@keyframes fade-in-up {
    0% { opacity: 0; transform: translateY(20px); }
    100% { opacity: 1; transform: translateY(0); }
}

@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

@keyframes pulse-glow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(0, 71, 125, 0.15); }
    50% { box-shadow: 0 0 0 12px rgba(0, 71, 125, 0); }
}

[x-cloak] { display: none !important; }

@keyframes fade-in-up {
    0% { opacity: 0; transform: translateY(24px); }
    100% { opacity: 1; transform: translateY(0); }
}

.animate-fade-in-up {
    animation: fade-in-up 0.7s ease-out both;
}

@media (prefers-reduced-motion: reduce) {
    .animate-fade-in-up,
    .group-hover\:scale-110,
    .transition-all,
    .transition-transform,
    .transition-opacity {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}
