/* ==========================================================================
   Bag Boutique — Brand Theme
   Loaded after Bootstrap. No build step: plain CSS, edit directly.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens (CSS custom properties)
   -------------------------------------------------------------------------- */
:root {
    --bb-ink: #111111;
    --bb-gold: #B8860B;
    --bb-cream: #F7F3EC;
    --bb-red: #E23B3B;
    --bb-border: #ECECEC;
    --bb-text: #333333;
    --bb-grey: #666666;
}

/* --------------------------------------------------------------------------
   2. Fonts
   -------------------------------------------------------------------------- */
/* Google Fonts are linked separately in the layout <head> with font-display: swap. */

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--bb-text);
}

h1, h2, h3, h4, h5, h6,
.font-heading {
    font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
    color: var(--bb-ink);
}

/* --------------------------------------------------------------------------
   3. Buttons
   -------------------------------------------------------------------------- */
.btn-bb-primary {
    background-color: var(--bb-ink);
    border-color: var(--bb-ink);
    color: #ffffff;
}

.btn-bb-primary:hover,
.btn-bb-primary:focus {
    background-color: var(--bb-gold);
    border-color: var(--bb-gold);
    color: #ffffff;
}

.btn-bb-gold {
    background-color: var(--bb-gold);
    border-color: var(--bb-gold);
    color: #ffffff;
}

.btn-bb-gold:hover,
.btn-bb-gold:focus {
    background-color: var(--bb-ink);
    border-color: var(--bb-ink);
    color: #ffffff;
}

/* --------------------------------------------------------------------------
   4. Utility classes
   -------------------------------------------------------------------------- */
.text-gold {
    color: var(--bb-gold);
}

.bg-cream {
    background-color: var(--bb-cream);
}

/* --------------------------------------------------------------------------
   5. Cards
   -------------------------------------------------------------------------- */
.card {
    border: 1px solid var(--bb-border);
    border-radius: 8px;
}