/*
 * Bar Bonsoir — design tokens.
 *
 * Layer 1: @font-face (self-hosted, no third-party requests).
 * Layer 2: brand primitives (raw palette, never consumed directly by components).
 * Layer 3: semantic tokens (surface / ink / accent / rule) consumed by every component.
 * Layer 4: tone scopes that remap the semantic layer (dark, parchment, velvet, charcoal).
 *
 * Every other stylesheet depends on this file (see functions.php).
 */

/* -------------------------------------------------------------------------- */
/* Fonts                                                                      */
/* -------------------------------------------------------------------------- */

@font-face {
    font-family: "ITC Cheltenham Std";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/CHELTENHAMSTDBOLDCOND.OTF") format("opentype");
}

@font-face {
    font-family: "Plantin MT Pro";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/PLANTINMTPRORG.TTF") format("truetype");
}

@font-face {
    font-family: "Plantin MT Pro";
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/PLANTINMTPRORGIT.TTF") format("truetype");
}

@font-face {
    font-family: "Plantin MT Pro";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/PLANTINMTPROSMBD.TTF") format("truetype");
}

/* Cinzel (SIL OFL) — variable 400–700, latin subset. Deco labels, nav, buttons. */
@font-face {
    font-family: "Cinzel";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("../fonts/cinzel-latin-variable.woff2") format("woff2");
}

/* Special Elite (Apache 2.0) — typewriter voice for notes from the cast. */
@font-face {
    font-family: "Special Elite";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/special-elite-latin.woff2") format("woff2");
}

@font-face {
    font-family: "Parisienne";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/Parisienne-Regular.ttf") format("truetype");
}

/* -------------------------------------------------------------------------- */
/* Primitives + semantic defaults (dark speakeasy tone)                       */
/* -------------------------------------------------------------------------- */

:root {
    /* Brand primitives */
    --nbb-mahogany: #140d09;
    --nbb-mahogany-rgb: 20, 13, 9;
    --nbb-mahogany-raised: #1d140e;
    --nbb-mahogany-raised-rgb: 29, 20, 14;
    --nbb-charcoal: #2a221b;
    --nbb-charcoal-rgb: 42, 34, 27;
    --nbb-parchment: #fbf6ee;
    --nbb-parchment-rgb: 251, 246, 238;
    --nbb-parchment-aged: #f1e6d3;
    --nbb-parchment-aged-rgb: 241, 230, 211;
    --nbb-crimson: #6b1820;
    --nbb-crimson-rgb: 107, 24, 32;
    --nbb-crimson-deep: #4a0f15;
    --nbb-crimson-deep-rgb: 74, 15, 21;
    --nbb-brass: #c8963e;
    --nbb-brass-rgb: 200, 150, 62;
    --nbb-brass-bright: #e0aa4d;
    --nbb-brass-bright-rgb: 224, 170, 77;
    --nbb-brass-deep: #8a6424;
    --nbb-brass-deep-rgb: 138, 100, 36;
    --nbb-sepia-ink: #2a1d14;
    --nbb-sepia-ink-rgb: 42, 29, 20;

    /* Exterior & sign (from the logo): cold street night, red neon lips. Contrast to the warm interior. */
    --nbb-night: #0d1b2c;
    --nbb-night-rgb: 13, 27, 44;
    --nbb-night-raised: #152a42;
    --nbb-night-raised-rgb: 21, 42, 66;
    --nbb-night-mist: #6f8fae;
    --nbb-night-mist-rgb: 111, 143, 174;
    --nbb-neon-red: #ff2b45;
    --nbb-neon-red-rgb: 255, 43, 69;
    --nbb-lip-red: #c8142f;
    --nbb-lip-red-rgb: 200, 20, 47;
    --nbb-neon-glow: 0 0 1px rgba(255, 215, 220, 0.9), 0 0 6px rgba(var(--nbb-neon-red-rgb), 0.8), 0 0 18px rgba(var(--nbb-neon-red-rgb), 0.45);

    /* Wood: solid oak bar counter. */
    --nbb-wood-image: url("../images/wood-counter.webp");
    --nbb-wood-size: 1400px;

    /* Paper: large seamless aged sheet (no visible repeat). */
    --nbb-paper-image: url("../images/paper-aged.webp");
    --nbb-paper-size: 1536px;
}

/* Default (dark speakeasy) semantic layer; repeated on dark scopes so they reset inside light ones. */
:root,
.nbb-tone-dark,
.is-style-nbb-section-dark {
    /* Semantic: surfaces */
    --nbb-surface: var(--nbb-mahogany);
    --nbb-surface-rgb: var(--nbb-mahogany-rgb);
    --nbb-surface-raised: var(--nbb-charcoal);
    --nbb-surface-raised-rgb: var(--nbb-charcoal-rgb);
    --nbb-surface-sunken: #0e0906;
    --nbb-surface-sunken-rgb: 14, 9, 6;

    /* Semantic: ink */
    --nbb-ink: var(--nbb-parchment);
    --nbb-ink-rgb: var(--nbb-parchment-rgb);
    --nbb-ink-soft: #ddd0bb;
    --nbb-ink-soft-rgb: 221, 208, 187;
    --nbb-ink-muted: #a8977f;
    --nbb-ink-muted-rgb: 168, 151, 127;
    --nbb-ink-on-accent: var(--nbb-mahogany);

    /* Semantic: accent */
    --nbb-accent: var(--nbb-brass);
    --nbb-accent-rgb: var(--nbb-brass-rgb);
    --nbb-accent-hover: var(--nbb-brass-bright);
    --nbb-accent-hover-rgb: var(--nbb-brass-bright-rgb);
    --nbb-signal: var(--nbb-crimson);
    --nbb-signal-rgb: var(--nbb-crimson-rgb);
    --nbb-signal-ink: #e7a4a0;

    /* Semantic: rules, dividers, focus */
    --nbb-rule: rgba(var(--nbb-accent-rgb), 0.28);
    --nbb-rule-strong: rgba(var(--nbb-accent-rgb), 0.55);
    --nbb-divider-ink: var(--nbb-brass);
    --nbb-divider-ink-soft: rgba(var(--nbb-brass-rgb), 0.45);
    --nbb-focus-ring: 0 0 0 2px var(--nbb-surface), 0 0 0 4px var(--nbb-accent-hover);
    --nbb-focus-ring-color: var(--nbb-accent-hover);
    --nbb-focus-ring-offset: 3px;

    /* Shadows: tinted to the mahogany hue, single top-left light source */
    --nbb-shadow-soft: 0 18px 44px -18px rgba(var(--nbb-mahogany-rgb), 0.85);
    --nbb-shadow-crisp: 0 12px 28px -10px rgba(var(--nbb-mahogany-rgb), 0.9);
    --nbb-shadow-inset: inset 0 1px 0 rgba(var(--nbb-brass-bright-rgb), 0.12), inset 0 0 0 1px rgba(var(--nbb-brass-rgb), 0.08);
    --nbb-shadow-well: inset 0 2px 6px rgba(var(--nbb-mahogany-rgb), 0.55);
}

:root {
    /* Aged brass plate (buttons): grit, tarnish, worn highlight, two screw heads. */
    --nbb-plate-bg:
        radial-gradient(circle at 12px 50%, #f6dca2 0 1px, #9a6c27 1.6px 2.8px, #3f280c 3.2px, transparent 3.8px),
        radial-gradient(circle at calc(100% - 12px) 50%, #f6dca2 0 1px, #9a6c27 1.6px 2.8px, #3f280c 3.2px, transparent 3.8px),
        url("../svg/brass-grit.svg") 0 0 / 160px 160px,
        radial-gradient(140% 120% at 100% 115%, rgba(66, 38, 8, 0.55), transparent 55%),
        radial-gradient(90% 150% at 0% -35%, rgba(255, 234, 186, 0.5), transparent 60%),
        linear-gradient(180deg, #d6a049 0%, #bd8832 55%, #8f6327 100%);
    --nbb-plate-border: #5e3f14;
    --nbb-plate-shadow:
        inset 0 1px 0 rgba(255, 230, 180, 0.45),
        inset 0 -1px 0 rgba(40, 20, 0, 0.45),
        0 2px 0 #3b250d,
        0 9px 16px -7px rgba(10, 5, 2, 0.85);
    --nbb-plate-shadow-pressed:
        inset 0 2px 4px rgba(40, 20, 0, 0.45),
        0 1px 0 #3b250d;
    --nbb-plate-ink: #2b1807;
    --nbb-plate-engrave: 0 1px 0 rgba(255, 226, 170, 0.55), 0 -1px 0 rgba(40, 20, 0, 0.3);
    --nbb-plate-radius: 3px 2px 4px 2px;

    /* Typography */
    --nbb-font-headline: "ITC Cheltenham Std", "Cheltenham", "Georgia", serif;
    --nbb-font-deco: "Cinzel", "Trajan Pro", "Georgia", serif;
    --nbb-font-body: "Plantin MT Pro", "Iowan Old Style", "Georgia", serif;
    --nbb-font-typewriter: "Special Elite", "Courier Prime", "Courier New", monospace;
    --nbb-font-script: "Parisienne", "Snell Roundhand", cursive;

    --nbb-fs-body: clamp(1.03rem, 0.98rem + 0.25vw, 1.125rem);
    --nbb-fs-small: 0.875rem;
    --nbb-fs-label: 0.78rem;
    --nbb-fs-h1: clamp(2.35rem, 1.6rem + 3.2vw, 3.6rem);
    --nbb-fs-h2: clamp(1.9rem, 1.4rem + 2.1vw, 2.7rem);
    --nbb-fs-h3: clamp(1.45rem, 1.2rem + 1.1vw, 1.9rem);
    --nbb-fs-h4: clamp(1.2rem, 1.08rem + 0.5vw, 1.45rem);
    --nbb-lh-body: 1.68;
    --nbb-lh-tight: 1.04;
    --nbb-track-headline: 0.015em;
    --nbb-track-deco: 0.18em;
    --nbb-track-label: 0.22em;
    --nbb-measure: 68ch;

    /* Layout */
    --nbb-max-width: 1100px;
    --nbb-gutter: clamp(1rem, 2.4vw, 1.75rem);
    --nbb-space-1: 0.25rem;
    --nbb-space-2: 0.5rem;
    --nbb-space-3: 0.75rem;
    --nbb-space-4: 1rem;
    --nbb-space-5: 1.5rem;
    --nbb-space-6: 2rem;
    --nbb-space-7: 3rem;
    --nbb-space-8: clamp(3rem, 6vw, 5rem);
    --nbb-radius-xs: 2px;
    --nbb-radius-sm: 4px;
    --nbb-radius: 6px;
    --nbb-radius-lg: 10px;

    /* Motion */
    --nbb-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --nbb-ease-spring: cubic-bezier(0.34, 1.36, 0.64, 1);
    --nbb-dur-fast: 160ms;
    --nbb-dur: 280ms;
    --nbb-dur-slow: 900ms;

    /* Layers */
    --nbb-z-backdrop: -2;
    --nbb-z-grain: -1;
    --nbb-z-raised: 1;

    /* Legacy aliases — keep pre-refactor variable names resolvable for saved content. */
    --nbb-ink-strong: var(--nbb-ink);
    --nbb-ink-strong-rgb: var(--nbb-ink-rgb);
    --nbb-accent-brass: var(--nbb-brass);
    --nbb-accent-brass-rgb: var(--nbb-brass-rgb);
    --nbb-accent-teal: var(--nbb-brass);
    --nbb-accent-teal-rgb: var(--nbb-brass-rgb);
    --nbb-accent-ember: var(--nbb-brass-bright);
    --nbb-accent-ember-rgb: var(--nbb-brass-bright-rgb);
    --nbb-accent-ember-deep: var(--nbb-crimson);
    --nbb-accent-ember-deep-rgb: var(--nbb-crimson-rgb);
    --nbb-surface-base: var(--nbb-mahogany-raised);
    --nbb-surface-base-rgb: var(--nbb-mahogany-raised-rgb);
    --nbb-surface-depth: var(--nbb-charcoal);
    --nbb-surface-depth-rgb: var(--nbb-charcoal-rgb);
    --nbb-surface-frame: var(--nbb-charcoal);
    --nbb-surface-frame-rgb: var(--nbb-charcoal-rgb);
    --nbb-letter-surface: var(--nbb-parchment);
    --nbb-letter-surface-rgb: var(--nbb-parchment-rgb);
    --nbb-letter-surface-depth: var(--nbb-parchment-aged);
    --nbb-letter-surface-depth-rgb: var(--nbb-parchment-aged-rgb);
    --nbb-letter-ink-strong: var(--nbb-sepia-ink);
    --nbb-letter-ink-strong-rgb: var(--nbb-sepia-ink-rgb);
    --nbb-letter-ink-soft: #4a3a2c;
    --nbb-letter-ink-soft-rgb: 74, 58, 44;
    --nbb-border-soft: var(--nbb-rule);
    --nbb-border-strong: var(--nbb-rule-strong);
    --nbb-serif-heading: var(--nbb-font-headline);
    --nbb-serif-body: var(--nbb-font-body);
    --nbb-handwriting: var(--nbb-font-script);
    --nbb-letter-wide: var(--nbb-track-headline);
    --nbb-contrast: var(--nbb-parchment);
}

/* -------------------------------------------------------------------------- */
/* Tone scopes — remap semantic tokens; components adapt automatically        */
/* -------------------------------------------------------------------------- */

.nbb-tone-parchment,
.is-style-nbb-section-parchment,
.is-style-nbb-framed-details,
.nbb-pattern-letter,
.nbb-form--parchment {
    --nbb-surface: var(--nbb-parchment);
    --nbb-surface-rgb: var(--nbb-parchment-rgb);
    --nbb-surface-raised: #fffbf4;
    --nbb-surface-raised-rgb: 255, 251, 244;
    --nbb-surface-sunken: var(--nbb-parchment-aged);
    --nbb-surface-sunken-rgb: var(--nbb-parchment-aged-rgb);
    --nbb-ink: var(--nbb-sepia-ink);
    --nbb-ink-rgb: var(--nbb-sepia-ink-rgb);
    --nbb-ink-soft: #4a3a2c;
    --nbb-ink-soft-rgb: 74, 58, 44;
    --nbb-ink-muted: #7a6650;
    --nbb-ink-muted-rgb: 122, 102, 80;
    --nbb-ink-on-accent: var(--nbb-parchment);
    --nbb-accent: var(--nbb-crimson);
    --nbb-accent-rgb: var(--nbb-crimson-rgb);
    --nbb-accent-hover: #8a2029;
    --nbb-accent-hover-rgb: 138, 32, 41;
    --nbb-signal-ink: var(--nbb-crimson);
    --nbb-rule: rgba(var(--nbb-brass-deep-rgb), 0.32);
    --nbb-rule-strong: rgba(var(--nbb-brass-deep-rgb), 0.6);
    --nbb-divider-ink: var(--nbb-brass-deep);
    --nbb-divider-ink-soft: rgba(var(--nbb-brass-deep-rgb), 0.45);
    --nbb-focus-ring: 0 0 0 2px var(--nbb-surface), 0 0 0 4px var(--nbb-brass-deep);
    --nbb-focus-ring-color: var(--nbb-brass-deep);
    --nbb-shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 0 0 1px rgba(var(--nbb-brass-deep-rgb), 0.12);
    --nbb-shadow-well: inset 0 2px 5px rgba(var(--nbb-sepia-ink-rgb), 0.08);
    color: var(--nbb-ink);
}

.nbb-tone-velvet,
.is-style-nbb-section-velvet,
.nbb-form--velvet {
    --nbb-surface: var(--nbb-crimson-deep);
    --nbb-surface-rgb: var(--nbb-crimson-deep-rgb);
    --nbb-surface-raised: var(--nbb-crimson);
    --nbb-surface-raised-rgb: var(--nbb-crimson-rgb);
    --nbb-surface-sunken: #330a0f;
    --nbb-surface-sunken-rgb: 51, 10, 15;
    --nbb-ink: var(--nbb-parchment);
    --nbb-ink-rgb: var(--nbb-parchment-rgb);
    --nbb-ink-soft: #ecd9cc;
    --nbb-ink-soft-rgb: 236, 217, 204;
    --nbb-ink-muted: #c9a99a;
    --nbb-ink-muted-rgb: 201, 169, 154;
    --nbb-accent: var(--nbb-brass-bright);
    --nbb-accent-rgb: var(--nbb-brass-bright-rgb);
    --nbb-signal-ink: var(--nbb-parchment);
    --nbb-rule: rgba(var(--nbb-brass-bright-rgb), 0.3);
    --nbb-rule-strong: rgba(var(--nbb-brass-bright-rgb), 0.6);
    --nbb-divider-ink: var(--nbb-brass-bright);
    --nbb-focus-ring: 0 0 0 2px var(--nbb-surface), 0 0 0 4px var(--nbb-brass-bright);
    color: var(--nbb-ink);
}

.nbb-tone-night,
.is-style-nbb-section-night,
.nbb-form--night {
    --nbb-surface: var(--nbb-night);
    --nbb-surface-rgb: var(--nbb-night-rgb);
    --nbb-surface-raised: var(--nbb-night-raised);
    --nbb-surface-raised-rgb: var(--nbb-night-raised-rgb);
    --nbb-surface-sunken: #08121e;
    --nbb-surface-sunken-rgb: 8, 18, 30;
    --nbb-ink: #eef2f6;
    --nbb-ink-rgb: 238, 242, 246;
    --nbb-ink-soft: #c7d3df;
    --nbb-ink-soft-rgb: 199, 211, 223;
    --nbb-ink-muted: #8ea3b8;
    --nbb-ink-muted-rgb: 142, 163, 184;
    --nbb-accent: var(--nbb-brass-bright);
    --nbb-accent-rgb: var(--nbb-brass-bright-rgb);
    --nbb-signal-ink: #ff8a98;
    --nbb-rule: rgba(var(--nbb-night-mist-rgb), 0.3);
    --nbb-rule-strong: rgba(var(--nbb-night-mist-rgb), 0.55);
    --nbb-shadow-inset: inset 0 1px 0 rgba(var(--nbb-night-mist-rgb), 0.18);
    --nbb-shadow-well: inset 0 2px 6px rgba(2, 8, 16, 0.6);
    color: var(--nbb-ink);
}

.nbb-tone-charcoal,
.is-style-nbb-section-charcoal {
    --nbb-surface: var(--nbb-charcoal);
    --nbb-surface-rgb: var(--nbb-charcoal-rgb);
    --nbb-surface-raised: #362b22;
    --nbb-surface-raised-rgb: 54, 43, 34;
    --nbb-surface-sunken: var(--nbb-mahogany-raised);
    --nbb-surface-sunken-rgb: var(--nbb-mahogany-raised-rgb);
    color: var(--nbb-ink);
}

.nbb-tone-dark,
.is-style-nbb-section-dark {
    color: var(--nbb-ink);
}