@import 'tailwindcss';

@source '../js/**/*.{vue,ts}';
@source '../views/**/*.blade.php';

/*
 * Vanguard design tokens.
 *
 * The primary ramp is derived from the historic Vanguard brand green (#179970,
 * hsl(161, 74%, 34.5%)) which is kept as --color-primary-600 so existing brand
 * usage renders identically to the Bootstrap theme it replaces.
 */
@theme {
    --color-primary-50: #edfcf8;
    --color-primary-100: #d3f8ed;
    --color-primary-200: #a6f2da;
    --color-primary-300: #71eac4;
    --color-primary-400: #37e1ab;
    --color-primary-500: #1ec892;
    --color-primary-600: #179970;
    --color-primary-700: #127c5b;
    --color-primary-800: #0f6247;
    --color-primary-900: #0a4231;
    --color-primary-950: #072c20;

    --color-body: #f5f8fa;
    --color-lighter: #f8fbfc;

    /* Form control fill, carried over from the Bootstrap theme's .input-solid. */
    --color-field: #f8f9fa;
    --color-sidebar: #30353e;
    --color-sidebar-active: #3b414c;

    --text-base: 0.9rem;
    --leading-base: 1.6;

    --spacing-navbar: 70px;
    --spacing-sidebar: 250px;
    --spacing-sidebar-collapsed: 80px;
}

@layer base {
    html {
        font-size: 100%;
    }

    body {
        background-color: var(--color-body);
        font-size: var(--text-base);
        line-height: var(--leading-base);
        color: var(--color-slate-700);
    }
}