/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;900&display=swap');

:root {
    --brand-50: #f0fdf4;
    --brand-100: #dcfce7;
    --brand-200: #bbf7d0;
    --brand-300: #86efac;
    --brand-400: #4ade80;
    --brand-500: #22c55e;
    --brand-600: #16a34a;
    --brand-700: #15803d;
    --brand-800: #166534;
    --brand-900: #14532d;
}

body {
    font-family: 'Inter', sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* Scrollbar Premium */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* Glassmorphism Classes */
.glass-panel {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.5);
}

.glass-dark {
    background: rgba(15, 23, 42, 0.8);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Utility to ensure Tailwind colors are mapped */
.bg-brand-50 { background-color: var(--brand-50); }
.bg-brand-100 { background-color: var(--brand-100); }
.bg-brand-500 { background-color: var(--brand-500); }
.bg-brand-600 { background-color: var(--brand-600); }
.bg-brand-700 { background-color: var(--brand-700); }
.bg-brand-800 { background-color: var(--brand-800); }
.bg-brand-900 { background-color: var(--brand-900); }

.text-brand-500 { color: var(--brand-500); }
.text-brand-600 { color: var(--brand-600); }
.text-brand-700 { color: var(--brand-700); }
.text-brand-900 { color: var(--brand-900); }

.from-brand-900 { --tw-gradient-from: var(--brand-900); }
.to-brand-800 { --tw-gradient-to: var(--brand-800); }
.from-brand-600 { --tw-gradient-from: var(--brand-600); }

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