/* ============================================================
   Bella Cumbre — Design tokens + Bootstrap overrides
   Load order: bootstrap.min.css → fonts.css → variables.css
   ============================================================ */

:root {
    /* ── Brand colors ── */
    --color-black:  #1A1A18;
    --color-beige:  #E8DCC4;
    --color-olive:  #5F6B3A;

    /* ── Bootstrap color tokens ── */
    --bs-primary:        #5F6B3A;
    --bs-primary-rgb:    95, 107, 58;
    --bs-light:          #E8DCC4;
    --bs-light-rgb:      232, 220, 196;
    --bs-dark:           #1A1A18;
    --bs-dark-rgb:       26, 26, 24;

    /* ── Bootstrap body ── */
    --bs-body-font-family:  'Jost', sans-serif;
    --bs-body-font-weight:  400;
    --bs-body-color:        #1A1A18;
    --bs-body-bg:           #FFFFFF;

    /* ── Bootstrap borders ── */
    --bs-border-color:       #E8DCC4;
    --bs-border-radius:      0.75rem;
    --bs-border-radius-sm:   0.5rem;
    --bs-border-radius-lg:   1rem;
    --bs-border-radius-pill: 50rem;

    /* ── Bootstrap button radius vars (Bootstrap reads these internally) ── */
    --bs-btn-border-radius:    50rem;
    --bs-btn-border-radius-sm: 50rem;
    --bs-btn-border-radius-lg: 50rem;

    /* ── Global button radius token — used by .btn override and custom buttons ── */
    --radius-btn: 50rem;

    /* ── Bootstrap link ── */
    --bs-link-color:       #5F6B3A;
    --bs-link-hover-color: #4e5930;

    /* ── Typography
         --font-sans  → Jost: descripciones, pies, botones, horarios, UI
         --font-serif → Cormorant Garamond: títulos de plato, precios, lemas
    ── */
    --font-sans:    'Jost', sans-serif;
    --font-serif:   'Cormorant Garamond', serif;

    /* Alias for back-compat with existing components */
    --font-primary: var(--font-sans);

    /* ── Spacing ── */
    --spacing-xs:  0.5rem;
    --spacing-sm:  1rem;
    --spacing-md:  2rem;
    --spacing-lg:  4rem;
    --spacing-xl:  8rem;
}

/* ── Global pill shape for all Bootstrap buttons ─────────── */
/*    Explicit rule wins over Bootstrap's component-level var */
.btn,
.btn-sm,
.btn-lg {
    border-radius: var(--radius-btn) !important;
}

/* ── btn-primary ─────────────────────────────────────────── */
.btn-primary {
    --bs-btn-bg:                 #5F6B3A;
    --bs-btn-border-color:       #5F6B3A;
    --bs-btn-hover-bg:           #4e5930;
    --bs-btn-hover-border-color: #4e5930;
    --bs-btn-active-bg:          #424e28;
    --bs-btn-active-border-color:#424e28;
    --bs-btn-disabled-bg:        #5F6B3A;
    --bs-btn-disabled-border-color: #5F6B3A;
    --bs-btn-color:              #fff;
    --bs-btn-hover-color:        #fff;
    --bs-btn-active-color:       #fff;
    --bs-btn-focus-shadow-rgb:   95, 107, 58;
}

/* ── btn-light ───────────────────────────────────────────── */
.btn-light {
    --bs-btn-bg:                 #E8DCC4;
    --bs-btn-border-color:       #E8DCC4;
    --bs-btn-hover-bg:           #ddd0b0;
    --bs-btn-hover-border-color: #ddd0b0;
    --bs-btn-active-bg:          #d0c49e;
    --bs-btn-active-border-color:#d0c49e;
    --bs-btn-color:              #1A1A18;
    --bs-btn-hover-color:        #1A1A18;
    --bs-btn-active-color:       #1A1A18;
    --bs-btn-focus-shadow-rgb:   232, 220, 196;
}

/* ── btn-outline-primary ─────────────────────────────────── */
.btn-outline-primary {
    --bs-btn-color:              #5F6B3A;
    --bs-btn-border-color:       #5F6B3A;
    --bs-btn-hover-bg:           #5F6B3A;
    --bs-btn-hover-border-color: #5F6B3A;
    --bs-btn-active-bg:          #5F6B3A;
    --bs-btn-active-border-color:#5F6B3A;
    --bs-btn-hover-color:        #fff;
    --bs-btn-active-color:       #fff;
    --bs-btn-focus-shadow-rgb:   95, 107, 58;
}

/* ── btn-outline-light ───────────────────────────────────── */
.btn-outline-light {
    --bs-btn-color:              var(--bs-primary);
    --bs-btn-border-color:       var(--bs-light);
    --bs-btn-hover-bg:           transparent;
    --bs-btn-hover-border-color: var(--bs-light);
    --bs-btn-active-bg:          transparent;
    --bs-btn-active-border-color:var(--bs-light);
    --bs-btn-hover-color:        var(--bs-primary);
    --bs-btn-active-color:       var(--bs-primary);
    --bs-btn-focus-shadow-rgb:   95, 107, 58;
}

/* ── Backgrounds & text utilities ────────────────────────── */
.bg-primary { background-color: #5F6B3A !important; }
.bg-light   { background-color: #E8DCC4 !important; }
.bg-dark    { background-color: #1A1A18 !important; }

.text-primary { color: #5F6B3A !important; }
.text-light   { color: #E8DCC4 !important; }

.border-primary { border-color: #5F6B3A !important; }
.border-light   { border-color: #E8DCC4 !important; }

/* ── Form focus ring ─────────────────────────────────────── */
.form-control:focus,
.form-select:focus {
    border-color: #5F6B3A;
    box-shadow:   0 0 0 0.25rem rgba(95, 107, 58, 0.25);
}

/* ── Links ───────────────────────────────────────────────── */
a {
    color:           #5F6B3A;
    text-decoration: none;
}

a:hover { color: #4e5930; }

/* ── Navbar active / focus ───────────────────────────────── */
.nav-link:focus-visible,
.navbar-toggler:focus {
    box-shadow: 0 0 0 0.25rem rgba(95, 107, 58, 0.25);
}