/* ===================================================================
   beachzoom.io — design tokens
   Shared variable layer used by future bz-* components on BOTH the
   public site and admin pages. Loaded ONLY by pages that opt in via
   <link rel="stylesheet" href="style-tokens.css">. Adding this file
   does not affect any existing page.
   Brand palette mirrors style.css so the two stay in sync.
   =================================================================== */

:root {
    /* Brand colors (kept in sync with style.css) */
    --bz-color-primary:       #1A7E78;   /* teal-deep */
    --bz-color-primary-hover: #146862;
    --bz-color-accent:        #E8C766;   /* gold */
    --bz-color-bg:            #FAF2E1;   /* cream */
    --bz-color-surface:       #FFFFFF;
    --bz-color-text:          #1A1815;   /* ink */
    --bz-color-text-muted:    #5A5550;
    --bz-color-border:        #E5DCC4;
    --bz-color-success:       #2E8B57;
    --bz-color-danger:        #C73E3E;

    /* Popup backdrop */
    --bz-blur-intensity: 10px;
    --bz-blur-dim:       0.45;

    /* Radii */
    --bz-radius-sm: 4px;
    --bz-radius-md: 8px;
    --bz-radius-lg: 16px;

    /* Spacing scale */
    --bz-space-1: 4px;
    --bz-space-2: 8px;
    --bz-space-3: 12px;
    --bz-space-4: 16px;
    --bz-space-5: 24px;
    --bz-space-6: 32px;

    /* Type scale */
    --bz-font-size-base: 15px;
    --bz-font-size-sm:   13px;
    --bz-font-size-lg:   18px;
    --bz-font-size-xl:   24px;

    /* Type-style family defaults — bzDesign's Type tab still wins
       when the operator picks something; these defaults only fire
       when nothing has been published yet for that style. Order:
       chosen family → stylistic sibling → generic. */
    --bzSubheading-family: 'Montserrat', 'Open Sans', sans-serif;
    --bzNav-family:        'Bebas Neue', 'Montserrat', sans-serif;
}

/* ===================================================================
   bz-popup — backdrop + modal primitive
   Created by js/bz-popup.js. Markup contract:
     <div class="bz-popup-backdrop">
       <div class="bz-popup">
         <div class="bz-popup__header">
           <h2 class="bz-popup__title">…</h2>
           <button class="bz-popup__close">×</button>
         </div>
         <div class="bz-popup__body">…</div>
         <div class="bz-popup__footer">…</div>
       </div>
     </div>
   =================================================================== */

.bz-popup-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, var(--bz-blur-dim));
    backdrop-filter: blur(var(--bz-blur-intensity));
    -webkit-backdrop-filter: blur(var(--bz-blur-intensity));
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--bz-space-4);
    z-index: 9999;
    animation: bz-fade-in 160ms ease-out;
}

.bz-popup {
    background: var(--bz-color-surface);
    color: var(--bz-color-text);
    border-radius: var(--bz-radius-lg);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.22);
    width: 100%;
    max-width: 480px;
    max-height: calc(100vh - var(--bz-space-6));
    overflow: hidden;
    display: flex;
    flex-direction: column;
    font-size: var(--bz-font-size-base);
    animation: bz-pop-in 200ms cubic-bezier(.2,.9,.3,1.2);
}

.bz-popup__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--bz-space-4) var(--bz-space-5);
    border-bottom: 1px solid var(--bz-color-border);
}

.bz-popup__title {
    font-size: var(--bz-font-size-lg);
    font-weight: 600;
    margin: 0;
}

.bz-popup__close {
    background: transparent;
    border: 0;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    color: var(--bz-color-text-muted);
    padding: 0 var(--bz-space-2);
    border-radius: var(--bz-radius-sm);
}
.bz-popup__close:hover { color: var(--bz-color-text); background: var(--bz-color-bg); }

.bz-popup__body {
    padding: var(--bz-space-5);
    overflow: auto;
}

.bz-popup__footer {
    padding: var(--bz-space-4) var(--bz-space-5);
    border-top: 1px solid var(--bz-color-border);
    display: flex;
    gap: var(--bz-space-3);
    justify-content: flex-end;
}

/* Buttons used inside popups */
.bz-btn {
    font: inherit;
    padding: var(--bz-space-3) var(--bz-space-5);
    border-radius: var(--bz-radius-md);
    border: 1px solid transparent;
    cursor: pointer;
    font-weight: 500;
}
.bz-btn--primary {
    background: var(--bz-color-primary);
    color: #fff;
}
.bz-btn--primary:hover { background: var(--bz-color-primary-hover); }
.bz-btn--ghost {
    background: transparent;
    color: var(--bz-color-text);
    border-color: var(--bz-color-border);
}
.bz-btn--ghost:hover { background: var(--bz-color-bg); }

/* Mobile: full-width popup on small screens */
@media (max-width: 767px) {
    .bz-popup {
        max-width: 100%;
        border-radius: var(--bz-radius-md);
    }
    .bz-popup-backdrop { padding: var(--bz-space-3); }
}

@keyframes bz-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes bz-pop-in {
    from { transform: translateY(8px) scale(0.98); opacity: 0; }
    to   { transform: translateY(0)   scale(1);    opacity: 1; }
}

/* ─── bz-stars — half-star rating component ──────────────────────────
   Used by js/bz-stars.js. Two modes: interactive (default) and readonly
   (display only, no hover/click cursor).                              */
.bz-stars { display: inline-block; line-height: 1; }
.bz-stars:focus { outline: none; }
.bz-stars:focus-visible .bz-stars__row {
    outline: 2px solid var(--bz-color-primary);
    outline-offset: 4px;
    border-radius: 4px;
}
.bz-stars__row {
    display: inline-flex;
    gap: 2px;
}
.bz-stars__star {
    display: inline-block;
    width: 28px;
    height: 28px;
    cursor: pointer;
    position: relative;
}
.bz-stars__row.is-readonly .bz-stars__star { cursor: default; }
.bz-stars__star svg {
    width: 100%;
    height: 100%;
    display: block;
}
.bz-stars__bg { fill: var(--bz-color-border); }
.bz-stars__fg { fill: #f5b301; }   /* warm star yellow */
.bz-stars__row:not(.is-readonly) .bz-stars__star:hover .bz-stars__fg { fill: #e0a000; }

/* Smaller scale for inline / card use */
.bz-stars--sm .bz-stars__star { width: 18px; height: 18px; }
.bz-stars--lg .bz-stars__star { width: 36px; height: 36px; }