/* ============================================================================
   HoneyBee Central Web — base.css
   Design tokens + shared utility/button classes for the public (HoneybeeWeb) surface.
   Introduced by CW1 CSS consolidation (2026-07-05). Loaded globally via central_header.

   DESIGN RULE — this file is INERT on purpose:
   only :root custom properties and class-scoped selectors (.n-*) live here.
   No naked element rules (body, *, a, p …). style.css owns the global body
   background (--bg-primary-color) and the *{box-sizing} reset, so base.css can
   load on every central page without altering pages that don't opt into --n-*.
   The opinionated body{} rule stays scoped to the design-system pages that
   include _web_design_system.html.twig (or inline it, e.g. home).

   ── Unified breakpoint scale (CW1) ─────────────────────────────────────────
   Use these breakpoints — and only these — across the central surface:
       360   480   640   768   1024   1280   1440   (px)
   ============================================================================ */

/* ── Design tokens: Scandinavian marketing system (--n-*) ──────────────────── */
:root {
    --n-cream:      #F7F5F0;
    --n-cream-2:    #F0EDE5;
    --n-cream-3:    #E8E3D9;
    --n-white:      #FFFFFF;
    --n-dark:       #1A1D2E;
    --n-dark-2:     #252840;
    --n-navy:       #1E3A6E;
    --n-amber:      #C07D2A;
    --n-amber-lt:   #D4954A;
    --n-amber-dim:  rgba(192,125,42,.10);
    --n-sage:       #3D6B52;
    --n-sage-dim:   rgba(61,107,82,.09);
    --n-slate:      #3D4F72;
    --n-slate-dim:  rgba(61,79,114,.08);
    --n-muted:      #6B6E7F;
    --n-muted-2:    #9395A5;
    --n-border:     rgba(26,29,46,.07);
    --n-border-md:  rgba(26,29,46,.12);
    --n-shadow-xs:  0 1px 4px rgba(26,29,46,.05);
    --n-shadow-sm:  0 2px 12px rgba(26,29,46,.07);
    --n-shadow-md:  0 8px 32px rgba(26,29,46,.09);
    --n-shadow-lg:  0 20px 64px rgba(26,29,46,.10);
    --n-radius-sm:  8px;
    --n-radius:     12px;
    --n-radius-lg:  20px;
    --n-font:       'DM Sans', 'Poppins', system-ui, sans-serif;
}

/* ── Design tokens: central_header navbar system (--hb-*) ──────────────────── */
:root {
    --hb-ink: #1A1D2E;
    --hb-ink-2: #252840;
    --hb-amber: #C07D2A;
    --hb-amber-lt: #D4954A;
    --hb-muted: #6B6E7F;
    --hb-border: rgba(26, 29, 46, .08);
    --hb-border-md: rgba(26, 29, 46, .14);
    --hb-cream: #F7F5F0;
    --hb-white: #FFFFFF;
    --hb-shadow: 0 2px 20px rgba(26, 29, 46, .07);
    --hb-shadow-lg: 0 8px 32px rgba(26, 29, 46, .10);
    --hb-radius: 10px;
    --hb-font: 'DM Sans', 'Gilroy', system-ui, sans-serif;
}

/* NOTE: the `.n-sec p / .n-hero p / .n-wrap p / .pe-hero p { text-align:left }`
   override intentionally does NOT live here. It targets bare <p> (overriding
   style.css's global p{text-align:justify}), so globalising it would flip
   paragraph alignment on any page that merely uses .n-wrap/.n-sec. It stays in
   _web_design_system.html.twig, the opt-in carrier for opinionated element
   rules, so base.css can load everywhere while remaining strictly inert. */

/* ── Utilities ─────────────────────────────────────────────────────────────── */
.n-wrap    { max-width: 1160px; margin: 0 auto; padding: 0 28px; }
.n-wrap-sm { max-width: 820px;  margin: 0 auto; padding: 0 28px; }
.n-sec     { padding: 100px 0; }
.n-sec-sm  { padding: 64px 0; }
.n-label   {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
    color: var(--n-amber); margin-bottom: 16px;
}
.n-label::before { content:''; width: 18px; height: 1.5px; background: currentColor; border-radius: 2px; }
.n-h1      { font-family:'Montserrat',sans-serif; font-size: clamp(36px,5vw,62px); font-weight: 800; line-height: 1.06; letter-spacing: -.02em; }
.n-h2      { font-family:'Montserrat',sans-serif; font-size: clamp(26px,3.5vw,42px); font-weight: 800; line-height: 1.12; letter-spacing: -.02em; }
.n-h3      { font-family:'Montserrat',sans-serif; font-size: 18px; font-weight: 700; line-height: 1.3; }
.n-body    { font-size: 16px; line-height: 1.75; color: var(--n-muted); }
.n-body-sm { font-size: 14px; line-height: 1.7;  color: var(--n-muted); }
.n-center  { text-align: center; }
.n-center .n-label { justify-content: center; }
.n-center .n-body  { max-width: 560px; margin: 0 auto; }
.n-mt-4    { margin-top: 16px; }
.n-mt-6    { margin-top: 24px; }
.n-mt-8    { margin-top: 32px; }
.n-mt-12   { margin-top: 48px; }
em.n-em    { font-style: normal; color: var(--n-amber); }

/* ── Buttons ───────────────────────────────────────────────────────────────── */
.n-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 13px 26px; border-radius: var(--n-radius-sm);
    font-size: 14px; font-weight: 600; letter-spacing: .01em;
    border: none; cursor: pointer; text-decoration: none; transition: all .18s;
    white-space: nowrap; font-family: var(--n-font);
}
.n-btn-primary { background: var(--n-dark);  color: #fff; }
.n-btn-primary:hover  { background: var(--n-dark-2); color: #fff; transform: translateY(-1px); box-shadow: var(--n-shadow-md); }
.n-btn-amber   { background: var(--n-amber); color: #fff; }
.n-btn-amber:hover    { background: var(--n-amber-lt); color: #fff; transform: translateY(-1px); box-shadow: 0 6px 20px rgba(192,125,42,.3); }
.n-btn-outline { background: transparent; border: 1.5px solid var(--n-border-md); color: var(--n-dark); }
.n-btn-outline:hover  { border-color: var(--n-dark); color: var(--n-dark); transform: translateY(-1px); }
.n-btn-ghost-light    { background: rgba(255,255,255,.12); border: 1.5px solid rgba(255,255,255,.2); color: #fff; }
.n-btn-ghost-light:hover { background: rgba(255,255,255,.2); color: #fff; }
.n-btn-light   { background: #fff; color: var(--n-dark); }
.n-btn-light:hover    { background: var(--n-cream-2); color: var(--n-dark); }
.n-btn i, .n-btn .fa  { font-size: 15px; }