/* ==========================================================================
   Blackbeard's Adult Resort — design tokens
   Palette values were sampled directly from the approved template design
   (Template Design/Black Beard Website Design.pdf).
   ========================================================================== */

:root {
    /* --- Surfaces -------------------------------------------------------- */
    --bb-black: #000000;
    --bb-ink: #050403;
    --bb-surface: #080808;
    --bb-surface-raised: #11100e;
    --bb-parchment: #edd1a0;
    --bb-parchment-deep: #e8c898;
    --bb-parchment-field: #f0d4a6; /* input fill on the parchment panel */

    /* Ink used on parchment, where the palette inverts. */
    --bb-ink-dark: #14100a;
    --bb-ink-soft: #2b2113;
    --bb-ink-line: #6d4c19;
    --bb-ink-red: #8b2418;

    /* --- Gold ------------------------------------------------------------ */
    --bb-gold-100: #f4e3b4;
    --bb-gold-200: #ead077;
    --bb-gold-300: #e3c275;
    --bb-gold-400: #d4a54a;
    --bb-gold-500: #c08d30; /* brand gold */
    --bb-gold-600: #b89a33; /* the 2px rules bounding the amenities strip */
    --bb-gold-700: #a87c33;
    --bb-gold-900: #6b4c1e;

    /* --- Red -------------------------------------------------------------- */
    --bb-red-300: #9e2c3c; /* section eyebrow accent */
    --bb-red-400: #a8151d;
    --bb-red-500: #820a10; /* primary button fill */
    --bb-red-600: #5e070c;

    /* --- Text ------------------------------------------------------------- */
    --bb-text: #f3f3f3;
    --bb-text-warm: #ede7d8;
    --bb-text-muted: #dddddc;
    --bb-text-dim: rgba(243, 243, 243, 0.66);

    /* --- Lines & shadows -------------------------------------------------- */
    --bb-hairline: rgba(192, 141, 48, 0.28);
    --bb-hairline-soft: rgba(192, 141, 48, 0.14);
    /* Warm-neutral rules used inside content sections — sampled from the
       template's card borders (#201F17) and button outlines (#655F4E). */
    --bb-rule-faint: rgba(216, 200, 164, 0.13);
    --bb-rule: rgba(210, 196, 164, 0.45);
    --bb-shadow-lg: 0 24px 60px -18px rgba(0, 0, 0, 0.85);
    --bb-shadow-btn: 0 10px 26px -12px rgba(130, 10, 16, 0.9);

    /* --- Type ------------------------------------------------------------- */
    --bb-font-display: "Cinzel", "Trajan Pro", "Times New Roman", serif;
    --bb-font-serif: "Playfair Display", Georgia, "Times New Roman", serif;
    --bb-font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

    --bb-tracking-wide: 0.08em;
    --bb-tracking-nav: 0.12em;
    --bb-tracking-wider: 0.14em;

    /* --- Layout ----------------------------------------------------------- */
    --bb-gutter: clamp(1.125rem, 2.6vw, 3.5rem);
    --bb-shell: 1920px;     /* header + hero: near full-bleed (57px margins at 1920) */
    --bb-container: 1640px; /* content sections: the template insets these to 144px */
    --bb-container-wide: 1844px; /* the events row runs wider in the template */

    --bb-radius: 2px;

    /* --- Header ----------------------------------------------------------- */
    --bb-logo-h: clamp(3.25rem, 10.8vw, 13rem);
    --bb-logo-h-compact: clamp(2.75rem, 4.6vw, 5.25rem);
    --bb-header-pad: clamp(0.75rem, 1.2vw, 1.5rem);
    --bb-header-z: 100;

    /* --- Motion ----------------------------------------------------------- */
    --bb-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    --bb-dur: 320ms;
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --bb-dur: 1ms;
    }
}

/*
 * The hero-sized logo is 2.25x as wide as the condensed one, and it only
 * shares a row with the seven nav labels and the CTA from about 1780px up —
 * the template is drawn at 1920, where the row clears by 56px. Below that it
 * pushed the button off the right edge: at 1280 the header needed 1455px
 * against the 1265 it had. The oversized logo is a large-screen flourish, so
 * from the drawer breakpoint to 1899 the header starts out condensed.
 *
 * Overriding the token rather than the header rule keeps the hero's top
 * padding, which reserves room for the logo, in step with it. Measured, not
 * guessed: every width in the range was probed in the browser.
 */
@media (min-width: 1261px) and (max-width: 1899px) {
    :root {
        --bb-logo-h: var(--bb-logo-h-compact);
    }
}