/* ==========================================================================
   Bootstrap 5.3 → Barking Barrel

   The brief was explicit: "I don't want it to just be this generic landing
   page." Default Bootstrap is the most recognisable look on the web, so this
   file is what earns the framework its place.

   Bootstrap 5.3 exposes per-component CSS custom properties, which means the
   whole palette, type and shape language can be remapped at runtime with no
   Sass build — matching the no-bundler constraint. Load order matters:

       bootstrap.min.css → bootstrap-vue-next.css → tokens.css → THIS → site.css
   ========================================================================== */

:root,
[data-bs-theme="light"] {
    /* --- Palette ------------------------------------------------------- */

    --bs-body-bg: var(--bb-cream);
    --bs-body-bg-rgb: 247, 242, 231;
    --bs-body-color: var(--bb-text);
    --bs-body-color-rgb: 91, 70, 50;

    --bs-emphasis-color: var(--bb-brown);
    --bs-secondary-color: var(--bb-text-muted);
    --bs-tertiary-color: var(--bb-brown-soft);
    --bs-secondary-bg: var(--bb-cream-deep);
    --bs-tertiary-bg: var(--bb-cream-card);

    --bs-primary: var(--bb-sage-ink);
    --bs-primary-rgb: 90, 118, 88;
    --bs-primary-text-emphasis: var(--bb-sage-ink);
    --bs-primary-bg-subtle: #e6ede4;
    --bs-primary-border-subtle: #c5d4c2;

    --bs-secondary: var(--bb-tan-ink);
    --bs-secondary-rgb: 138, 100, 64;

    --bs-link-color: var(--bb-link);
    --bs-link-color-rgb: 90, 118, 88;
    --bs-link-hover-color: var(--bb-link-hover);
    --bs-link-hover-color-rgb: 138, 100, 64;

    --bs-border-color: var(--bb-border);
    --bs-border-color-translucent: rgb(91 70 50 / 0.1);

    /* --- Type ---------------------------------------------------------- */

    --bs-body-font-family: var(--bb-font-body);
    --bs-body-font-size: var(--bb-text-base);
    --bs-body-font-weight: 400;
    --bs-body-line-height: var(--bb-leading-normal);

    --bs-heading-color: var(--bb-heading);

    /* --- Shape --------------------------------------------------------- */

    --bs-border-radius-sm: var(--bb-radius-sm);
    --bs-border-radius: var(--bb-radius);
    --bs-border-radius-lg: var(--bb-radius-lg);
    --bs-border-radius-xl: var(--bb-radius-xl);
    --bs-border-radius-2xl: var(--bb-radius-xl);
    --bs-border-radius-pill: var(--bb-radius-pill);

    /* --- Elevation ----------------------------------------------------- */

    --bs-box-shadow-sm: var(--bb-shadow-sm);
    --bs-box-shadow: var(--bb-shadow);
    --bs-box-shadow-lg: var(--bb-shadow-lg);

    /* Bootstrap's default focus ring is its brand blue, which is the single
       most obvious "this is Bootstrap" tell — and it clashes badly with the
       warm palette. */
    --bs-focus-ring-color: rgb(90 118 88 / 0.35);
    --bs-focus-ring-width: 0.22rem;
}

/* --------------------------------------------------------------------------
   Headings — Baloo 2, and heavier than Bootstrap's default. The face has a
   soft, rounded skeleton that only reads as friendly at 600+.
   -------------------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--bb-font-display);
    font-weight: 700;
    line-height: var(--bb-leading-tight);
    letter-spacing: -0.01em;
    color: var(--bb-heading);
}

/* --------------------------------------------------------------------------
   Buttons

   Bootstrap's stock button is a flat rectangle with a 1px border. These get a
   pill radius, a warm shadow and a small lift on hover so they feel physical.
   -------------------------------------------------------------------------- */

.btn {
    --bs-btn-font-family: var(--bb-font-body);
    --bs-btn-font-weight: 700;
    --bs-btn-border-radius: var(--bb-radius-pill);
    --bs-btn-padding-x: 1.6rem;
    --bs-btn-padding-y: 0.7rem;

    letter-spacing: 0.01em;
    transition:
        transform var(--bb-duration-fast) var(--bb-ease-out),
        box-shadow var(--bb-duration-fast) var(--bb-ease-out),
        background-color var(--bb-duration-fast) ease,
        border-color var(--bb-duration-fast) ease;
}

.btn-lg {
    --bs-btn-padding-x: 2.1rem;
    --bs-btn-padding-y: 0.9rem;
    --bs-btn-font-size: var(--bb-text-lg);
}

/* Solid buttons use the darkened ink tokens. At 14-16px, white on the
   original --bb-sage-dark measures 3.73:1 and fails AA; the ink tokens clear
   it. See tokens.css. */
.btn-primary {
    --bs-btn-bg: var(--bb-sage-ink);
    --bs-btn-border-color: var(--bb-sage-ink);
    --bs-btn-hover-bg: #9eb69d;
    --bs-btn-hover-border-color: #93aa92;
    --bs-btn-active-bg: #9eb69d;
    --bs-btn-active-border-color: #869f85;
    --bs-btn-disabled-bg: var(--bb-sage);
    --bs-btn-disabled-border-color: var(--bb-sage);
    --bs-btn-box-shadow: none;
}

.btn-secondary {
    --bs-btn-bg: var(--bb-tan-ink);
    --bs-btn-border-color: var(--bb-tan-ink);
    --bs-btn-hover-bg: #785738;
    --bs-btn-hover-border-color: #785738;
    --bs-btn-active-bg: #6b4e32;
    --bs-btn-active-border-color: #6b4e32;
}

.btn-outline-primary {
    --bs-btn-color: var(--bb-sage-ink);
    --bs-btn-border-color: var(--bb-sage-ink);
    --bs-btn-hover-bg: var(--bb-sage-ink);
    --bs-btn-hover-border-color: var(--bb-sage-ink);
    --bs-btn-active-bg: #9eb69d;
    --bs-btn-border-width: 2px;
}

.btn-primary,
.btn-secondary {
    box-shadow: var(--bb-shadow-sm);
}

.btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: var(--bb-shadow);
}

.btn:active:not(:disabled) {
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .btn:hover:not(:disabled),
    .btn:active:not(:disabled) {
        transform: none;
    }
}

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */

.card {
    --bs-card-bg: var(--bb-cream-card);
    --bs-card-border-color: var(--bb-border);
    --bs-card-border-radius: var(--bb-radius-lg);
    --bs-card-inner-border-radius: var(--bb-radius);
    --bs-card-spacer-x: 1.6rem;
    --bs-card-spacer-y: 1.6rem;
    --bs-card-box-shadow: var(--bb-shadow-sm);
}

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */

.form-control,
.form-select {
    background-color: var(--bb-cream-card);
    border-color: var(--bb-border-strong);
    border-radius: var(--bb-radius);
    color: var(--bb-text);
    padding: 0.75rem 1rem;
    transition:
        border-color var(--bb-duration-fast) ease,
        box-shadow var(--bb-duration-fast) ease;
}

.form-control::placeholder {
    color: var(--bb-brown-faint);
}

.form-control:focus,
.form-select:focus {
    background-color: var(--bb-cream-card);
    border-color: var(--bb-sage-ink);
    box-shadow: var(--bb-shadow-focus);
    color: var(--bb-text);
}

.form-label {
    color: var(--bb-brown-muted);
    font-weight: 700;
    font-size: var(--bb-text-sm);
    margin-bottom: 0.4rem;
}

/* --------------------------------------------------------------------------
   Focus visibility

   3:1 against the adjacent background is the WCAG bar for non-text
   indicators. The default Bootstrap blue is replaced everywhere.
   -------------------------------------------------------------------------- */

:focus-visible {
    outline: 3px solid var(--bb-focus);
    outline-offset: 2px;
    border-radius: var(--bb-radius-sm);
}

.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible {
    outline: none;
    box-shadow: var(--bb-shadow-focus);
}

/* --------------------------------------------------------------------------
   Alerts — used for the promotions banner
   -------------------------------------------------------------------------- */

.alert {
    --bs-alert-border-radius: var(--bb-radius-lg);
    border-width: 1px;
}

.alert-primary {
    --bs-alert-color: var(--bb-sage-ink);
    --bs-alert-bg: #e6ede4;
    --bs-alert-border-color: #c5d4c2;
}