/* In wedge-main/public/css/style.css */

/* 1. Override Bootstrap CSS Variables for a Tailwind-like feel */
:root {
    /* Muted Grays */
    --bs-light: #f9fafb; /* like tailwind gray-50 */
    --bs-light-rgb: 249, 250, 251;
    --bs-secondary-bg: #f3f4f6; /* like tailwind gray-100 */

    /* Softer Blue */
    --bs-primary: #3b82f6;
    --bs-primary-rgb: 59, 130, 246;

    /* Spacing & Borders */
    --bs-border-radius: 0.375rem; /* .rounded-md */
    --bs-border-radius-lg: 0.5rem; /* .rounded-lg */
    --bs-border-color: #e5e7eb; /* like tailwind gray-200 */

    /* Box Shadows */
    --bs-box-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --bs-box-shadow:
        0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
}

/* 2. Style the main body for a cleaner look */
body {
    background-color: var(--bs-light);
    color: #374151; /* like tailwind gray-700 */
}

/* 3. Soften button styles to be less "Bootstrap-y" */
.btn {
    /* The box-shadow gives buttons a subtle lift */
    box-shadow: var(--bs-box-shadow-sm);
}

.btn-primary {
    /* A little less bold than default Bootstrap */
    font-weight: 500;
}

/* 4. (Optional) Add your own custom utility classes */
.shadow-md {
    box-shadow:
        0 4px 6px -1px rgba(0, 0, 0, 0.1),
        0 2px 4px -2px rgba(0, 0, 0, 0.1);
}