@import 'tailwindcss';

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

/*
| WEBX Travel — brand design tokens.
| Identity: deep navy + electric blue gradient (from the WEBX mark).
*/
@theme {
    --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;

    /* Deep navy — sidebar, headings, brand ink */
    --color-navy-950: #050d1c;
    --color-navy-900: #0a1526;
    --color-navy-850: #0d1c33;
    --color-navy-800: #102340;
    --color-navy-700: #17325a;
    --color-navy-600: #21446f;

    /* Electric blue — primary accent */
    --color-brand-50: #eef4ff;
    --color-brand-100: #dbe7ff;
    --color-brand-200: #b8ceff;
    --color-brand-300: #8bb0ff;
    --color-brand-400: #5b8dff;
    --color-brand-500: #2f6bff;
    --color-brand-600: #1f56f0;
    --color-brand-700: #1a45c4;

    /* Cyan tail of the brand gradient */
    --color-aqua-400: #35b6ff;
    --color-aqua-500: #12a0f4;

    /* App surface */
    --color-surface: #f3f6fb;
    --color-surface-2: #e9eef7;

    --shadow-card: 0 1px 2px rgb(10 21 38 / 0.04), 0 8px 24px -12px rgb(10 21 38 / 0.12);
    --shadow-pop: 0 12px 40px -12px rgb(10 21 38 / 0.28);

    --radius-xl: 0.9rem;
}

/* Brand gradient used on the logo mark, primary buttons and active nav. */
.brand-gradient {
    background-image: linear-gradient(135deg, var(--color-brand-600) 0%, var(--color-aqua-400) 100%);
}

.brand-gradient-navy {
    background-image: linear-gradient(160deg, var(--color-navy-950) 0%, var(--color-navy-850) 55%, var(--color-navy-800) 100%);
}

/* Thin, unobtrusive scrollbars inside panels. */
.scroll-slim::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
.scroll-slim::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--color-navy-700) 30%, transparent);
    border-radius: 9999px;
}

html,
body {
    background-color: var(--color-surface);
}