/* ============================================================
    PILLOW FIGHT – Bootstrap CSS Variable Overrides
    Based on box art: warm tan background, magenta-pink title,
    soft parchment card tones, warm amber lighting accents.
============================================================ */
:root {
    /* ── Core Brand Colors ── */
    --pf-pink: #d4237a; /* bold magenta from title text */
    --pf-pink-light: #f06dab; /* softer pink for hover/secondary */
    --pf-pink-dark: #9e1159; /* deep pink for pressed states */

    --pf-tan: #c89a72; /* main box background tan */
    --pf-tan-light: #e8ceac; /* light parchment / card bg */
    --pf-tan-dark: #8b6244; /* shadow / dark tan */

    --pf-cream: #f5ebd8; /* page background / off-white */
    --pf-amber: #e8a43c; /* warm bedroom light accent */
    --pf-brown: #5c3a1e; /* text / dark foreground */

    /* ── Bootstrap 5 Theme Override ── */
    --bs-primary: var(--pf-pink);
    --bs-primary-rgb: 212, 35, 122;
    --bs-secondary: var(--pf-tan);
    --bs-secondary-rgb: 200, 154, 114;
    --bs-success: #5a9e6f;
    --bs-warning: var(--pf-amber);
    --bs-warning-rgb: 232, 164, 60;
    --bs-light: var(--pf-cream);
    --bs-light-rgb: 245, 235, 216;
    --bs-dark: var(--pf-brown);
    --bs-dark-rgb: 92, 58, 30;
    --bs-body-bg: var(--pf-cream);
    --bs-body-color: var(--pf-brown);
    --bs-body-font-family: "Nunito", sans-serif;
    --bs-link-color: var(--pf-pink);
    --bs-link-hover-color: var(--pf-pink-dark);
    --bs-border-radius: 0.6rem;
    --bs-border-color: var(--pf-tan);

    /* ── Button overrides ── */
    --bs-btn-font-family: "Fredoka One", cursive;
}

/* Patch .btn-primary since Bootstrap uses hardcoded vars internally */
.btn-primary {
    background-color: var(--pf-pink) !important;
    border-color: var(--pf-pink-dark) !important;
    color: #fff !important;
}
.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--pf-pink-dark) !important;
    border-color: var(--pf-pink-dark) !important;
}

.btn-secondary {
    background-color: var(--pf-tan) !important;
    border-color: var(--pf-tan-dark) !important;
    color: var(--pf-brown) !important;
}
.btn-secondary:hover {
    background-color: var(--pf-tan-dark) !important;
    color: #fff !important;
}

.btn-outline-primary {
    color: var(--pf-pink) !important;
    border-color: var(--pf-pink) !important;
}
.btn-outline-primary:hover {
    background-color: var(--pf-pink) !important;
    color: #fff !important;
}

/* Navbar */
.navbar-pillow {
    background-color: var(--pf-pink);
}
.navbar-pillow .navbar-brand,
.navbar-pillow .nav-link {
    color: #fff !important;
    font-family: "Fredoka One", cursive;
    letter-spacing: 0.04em;
}
.navbar-pillow .nav-link:hover {
    color: var(--pf-tan-light) !important;
}

/* Cards */
.card {
    background-color: var(--pf-tan-light);
    border: 1.5px solid var(--pf-tan);
}
.card-header {
    background-color: var(--pf-tan);
    color: var(--pf-brown);
    font-family: "Fredoka One", cursive;
    font-size: 1.1rem;
    border-bottom: 1.5px solid var(--pf-tan-dark);
}

/* Badges */
.badge.bg-primary {
    background-color: var(--pf-pink) !important;
}
.badge.bg-secondary {
    background-color: var(--pf-tan) !important;
    color: var(--pf-brown) !important;
}
.badge.bg-warning {
    background-color: var(--pf-amber) !important;
    color: var(--pf-brown) !important;
}

/* Progress bar */
.progress {
    background-color: var(--pf-tan-light);
    border: 1px solid var(--pf-tan);
}
.progress-bar {
    background-color: var(--pf-pink);
}

/* Form controls */
.form-control:focus,
.form-select:focus {
    border-color: var(--pf-pink);
    box-shadow: 0 0 0 0.2rem rgba(212, 35, 122, 0.2);
}

/* Alerts */
.alert-primary {
    background-color: #fad4e8;
    border-color: var(--pf-pink-light);
    color: var(--pf-pink-dark);
}
.alert-secondary {
    background-color: var(--pf-tan-light);
    border-color: var(--pf-tan);
    color: var(--pf-tan-dark);
}