@import 'tailwindcss';

@plugin '@tailwindcss/forms';

@custom-variant brand (&:where(.brand, .brand *));

@theme {
    --font-sans: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
    --font-display: 'Sansation', 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;

    --color-brand-50: #eef3fd;
    --color-brand-100: #dbe6fb;
    --color-brand-200: #bccff6;
    --color-brand-300: #8fadf0;
    --color-brand-400: #5d85e7;
    --color-brand-500: #3d6bff;
    --color-brand-600: #1f49c9;
    --color-brand-700: #172c70;
    --color-brand-800: #122352;
    --color-brand-900: #0e1b33;
    --color-brand-950: #081022;

    --color-surface: #f5f7fc;
}

/*
  Nicepage template reset leaks into Volt components on the public pages
  (form inputs inside the template layout). Scope fixes to a .brand wrapper.
*/
@layer components {
    .brand input[type='text'],
    .brand input[type='email'],
    .brand input[type='password'],
    .brand input[type='number'],
    .brand input[type='date'],
    .brand input[type='datetime-local'],
    .brand input[type='tel'],
    .brand input[type='url'],
    .brand textarea,
    .brand select {
        border-radius: var(--radius-md);
        border-width: 1px;
        border-color: var(--color-brand-100);
        background-color: #fff;
        padding: 0.5rem 0.75rem;
    }
}