/* ════════════════════════════════════════════════════════════════════════
   47-design-refinement.css — Phase 0 (tokens + minimal rebinds only)

   Goal: introduce the canonical token layer for the calmer-premium-glass
   refinement (Apple Wallet / VisionOS / Linear / Stripe direction) without
   visible changes to component layouts. Component refinement comes in
   Phases 1–6 in subsequent commits.

   Hard guards:
   • Loads LAST (after every other src/css/*.css and any inline <style>) so
     the cascade upgrades the look. Add the <link> immediately before
     </head> on every page.
   • v1 (Klassik / data-design="v1") stays pixel-equivalent. All accent
     rebinds are scoped to html[data-design="v2"] — attribute selector
     specificity (0,0,1,1) beats inline-style :root declarations (0,0,1,0).
   • No edits to existing CSS files. Rollback = delete this file +
     <link> tags.

   Phase 0 visible changes:
   1. Accent emerald saturation drop: #34D399 → #2BBA84 (v2 only)
   2. Font swap to Inter (both v1 and v2; pages with literal
      'Montserrat' in inline styles continue to use Montserrat
      because that font remains loaded in Phase 0 — cleanup later).
   ════════════════════════════════════════════════════════════════════════ */


/* ── Canonical accent (replaces three duplicates from 45-modern-premium.css)
       --mb-premium-blue (#059669), --mb-premium-cyan (#34D399),
       --mb-premium-green (#34D399) all collapse to one token. */
:root{
  --accent-emerald:        #2BBA84;
  --accent-emerald-hover:  #34C794;
  --accent-emerald-soft:   rgba(43,186,132,.12);
  --accent-emerald-ring:   rgba(43,186,132,.28);

  /* ── Status palette (dark-mode defaults; light overrides below) */
  --status-success:        #2BBA84;
  --status-success-soft:   rgba(43,186,132,.12);
  --status-success-ring:   rgba(43,186,132,.28);
  --status-warning:        #E0A648;
  --status-warning-soft:   rgba(224,166,72,.12);
  --status-warning-ring:   rgba(224,166,72,.28);
  --status-danger:         #E26565;
  --status-danger-soft:    rgba(226,101,101,.12);
  --status-danger-ring:    rgba(226,101,101,.28);
  --status-info:           #5BA8E0;
  --status-info-soft:      rgba(91,168,224,.12);
  --status-info-ring:      rgba(91,168,224,.28);
  --status-neutral:        #8B97A8;
  --status-neutral-soft:   rgba(139,151,168,.12);

  /* ── Surface scale (semantic; future component CSS reads these) */
  --canvas:                #0B1714;
  --surface-1:             #0F1D19;
  --surface-2:             #142621;
  --surface-3:             rgba(15,29,25,.72);
  --surface-elev:          rgba(7,22,18,.82);
  --surface-overlay:       rgba(15,29,25,.78);
  --line-1:                rgba(255,255,255,.06);
  --line-2:                rgba(255,255,255,.10);
  --line-strong:           rgba(43,186,132,.32);
  --text-1:                #ECF4EF;
  --text-2:                #B6C2BC;
  --text-3:                #7E8A86;

  /* ── Elevation */
  --elev-0: none;
  --elev-1: 0 8px 24px rgba(0,0,0,.20), 0 1px 0 rgba(255,255,255,.04) inset;
  --elev-2: 0 24px 60px rgba(0,0,0,.32), 0 1px 0 rgba(255,255,255,.05) inset;

  /* ── Glass tiers (Phase 1+ components consume these) */
  --glass-thin-bg:         rgba(8,18,16,.55);
  --glass-thin-filter:     blur(10px) saturate(115%);
  --glass-regular-bg:      rgba(7,22,18,.72);
  --glass-regular-filter:  blur(14px) saturate(120%);
  --glass-thick-bg:        rgba(5,18,15,.82);
  --glass-thick-filter:    blur(22px) saturate(130%);

  /* ── Motion */
  --motion-fast:           120ms;
  --motion-base:           200ms;
  --motion-slow:           320ms;
  --ease-standard:         cubic-bezier(.4,0,.2,1);
  --ease-entrance:         cubic-bezier(0,0,.2,1);
  --ease-exit:             cubic-bezier(.4,0,1,1);

  /* ── Type scale (Phase 6 applies these to headings) */
  --text-display-size:     44px;
  --text-display-lh:       1.05;
  --text-display-weight:   800;
  --text-display-tracking: -0.025em;
  --text-h1-size:          28px;
  --text-h1-lh:            1.15;
  --text-h1-weight:        700;
  --text-h1-tracking:      -0.02em;
  --text-h2-size:          22px;
  --text-h2-lh:            1.2;
  --text-h2-weight:        700;
  --text-h2-tracking:      -0.015em;
  --text-h3-size:          17px;
  --text-h3-lh:            1.3;
  --text-h3-weight:        600;
  --text-h3-tracking:      -0.005em;
  --text-body-lg-size:     15px;
  --text-body-lg-lh:       1.5;
  --text-body-size:        13.5px;
  --text-body-lh:          1.5;
  --text-body-weight:      500;
  --text-caption-size:     11.5px;
  --text-caption-lh:       1.4;
  --text-caption-weight:   600;
  --text-caption-tracking: 0.02em;
}


/* ── Light-mode surface + status overrides
       (Linear / Shopify Admin direction — warm white, not inverted-dark) */
[data-theme="light"]{
  --canvas:                #F8F8F5;
  --surface-1:             #FFFFFF;
  --surface-2:             #F2F3EE;
  --surface-3:             rgba(255,255,255,.78);
  --surface-elev:          #FFFFFF;
  --surface-overlay:       rgba(255,255,255,.86);
  --line-1:                rgba(15,28,40,.06);
  --line-2:                rgba(15,28,40,.10);
  --line-strong:           rgba(43,186,132,.40);
  --text-1:                #161A22;
  --text-2:                #4B5560;
  --text-3:                #7C8896;

  --status-success:        #0F8A5F;
  --status-warning:        #B0791F;
  --status-danger:         #B23B3B;
  --status-info:           #2A78B0;
  --status-neutral:        #5C6577;

  --glass-thin-bg:         rgba(255,255,255,.72);
  --glass-regular-bg:      rgba(255,255,255,.82);
  --glass-thick-bg:        rgba(255,255,255,.92);
  --elev-1: 0 8px 24px rgba(15,28,40,.08), 0 1px 0 rgba(255,255,255,.7) inset;
  --elev-2: 0 24px 60px rgba(15,28,40,.12), 0 1px 0 rgba(255,255,255,.8) inset;

  /* Light-mode accent gets a slight darken for AA contrast on white */
  --accent-emerald:        #0F8A5F;
  --accent-emerald-hover:  #0C7551;
  --accent-emerald-soft:   rgba(15,138,95,.10);
  --accent-emerald-ring:   rgba(15,138,95,.28);
}


/* ════════════════════════════════════════════════════════════════════════
   Phase 0 rebinds — ONLY the accent and the font.
   Surface tokens (--bg, --s1..s4, body backgrounds) are NOT rebound here;
   that happens in Phase 5 once components are ready.
   ════════════════════════════════════════════════════════════════════════ */


/* ── v2 (Modern) accent rebind. v1 (Klassik) is intentionally untouched. */
html[data-design="v2"]{
  /* Collapse the three near-identical premium greens to one canonical accent */
  --mb-premium-blue:    var(--accent-emerald);
  --mb-premium-blue-2:  var(--accent-emerald-hover);
  --mb-premium-cyan:    var(--accent-emerald);
  --mb-premium-green:   var(--accent-emerald);

  /* Re-bind legacy tokens that v2 had aliased to the bright greens */
  --np: var(--accent-emerald);
  --na: var(--accent-emerald-hover);
  --nb: var(--accent-emerald);
  --ng: var(--accent-emerald);
}


/* ── Font swap to Inter (both designs).
       Pages that hardcode 'Montserrat' in inline <style> are unaffected
       (Montserrat remains loaded for Phase 0 to avoid silent breakage in
       agb / datenschutz / impressum legal pages and minor decorative rules).
       Cleanup of those literals = separate later pass. */
:root{
  --font:         'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-body:    var(--font);
  --font-heading: var(--font);
}


/* ════════════════════════════════════════════════════════════════════════
   PHASE 1 — Sidebar + Top Nav + Mobile Bottom Nav refinement

   Calmer glass, Linear-style active states, brand wordmark de-glowed.
   Scope: html[data-design="v2"] only — v1 (Klassik) stays pixel-equivalent.
   Existing rules in 45-modern-premium.css use !important throughout, so
   the refinement layer matches !important where the cascade requires it.
   ════════════════════════════════════════════════════════════════════════ */


/* ── 1.1 Top nav / sidebar shell — drop intensity from blur(22px)/saturate(150%)
       to glass-regular (blur 14px / saturate 120%). */
html[data-design="v2"] .nav,
html[data-design="v2"] .bkc-nav,
html[data-design="v2"] .pshop-nav {
  background: rgba(12,28,20,.68) !important;
  border-color: rgba(255,255,255,.10) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.06) !important;
  backdrop-filter: var(--glass-regular-filter) !important;
  -webkit-backdrop-filter: var(--glass-regular-filter) !important;
}

html[data-design="v2"][data-theme="light"] .nav,
html[data-design="v2"][data-theme="light"] .bkc-nav,
html[data-design="v2"][data-theme="light"] .pshop-nav {
  background: rgba(255,255,255,.82) !important;
  border-color: var(--line-1) !important;
  box-shadow: 0 8px 24px rgba(15,28,40,.08), inset 0 1px 0 rgba(255,255,255,.5) !important;
}


/* ── 1.2 Mobile top nav (≤640px) → glass-thin (sticky bar, less weight) */
@media (max-width: 640px){
  html[data-design="v2"] .nav,
  html[data-design="v2"] .bkc-nav,
  html[data-design="v2"] .pshop-nav {
    background: var(--glass-thin-bg) !important;
    backdrop-filter: var(--glass-thin-filter) !important;
    -webkit-backdrop-filter: var(--glass-thin-filter) !important;
  }
  html[data-design="v2"][data-theme="light"] .nav,
  html[data-design="v2"][data-theme="light"] .bkc-nav,
  html[data-design="v2"][data-theme="light"] .pshop-nav {
    background: rgba(255,255,255,.72) !important;
  }
}


/* ── 1.3 Wordmark de-glow — remove drop-shadow on the favicon mark and
       text-shadow on the wordmark glyph; soften the gradient stops so the
       letterforms stop reading as "Web3 mint" and read as "premium emerald". */
html[data-design="v2"] .mb-wordmark::before,
.premium-public .mb-wordmark::before {
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.45)) !important;
}

html[data-design="v2"] .mb-wordmark::after,
.premium-public .mb-wordmark::after {
  background: linear-gradient(135deg, #FFFFFF 0%, #DDF5EB 55%, var(--accent-emerald) 100%) !important;
  -webkit-background-clip: text !important;
          background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  filter: drop-shadow(0 1px 6px rgba(0,0,0,.30)) !important;
}

html[data-design="v2"] .mb-icon,
.premium-public .mb-icon {
  filter: none !important;
}

/* v1-era brand-icon (the 32×32 colored square) — kill the always-on glow if v2
   markup still includes it anywhere. Harmless if the element isn't present. */
html[data-design="v2"] .brand-icon {
  box-shadow: none !important;
  background: linear-gradient(135deg, var(--accent-emerald), var(--accent-emerald-hover)) !important;
}


/* ── 1.4 Active state — Linear-style emerald-soft fill, no #fff text-bombing.
       Overrides 45-modern-premium.css:367-376 which uses rgba(16,185,129,.13)
       fill + rgba(52,211,153,.28) border + pure white text. */
html[data-design="v2"] .ntab.active,
html[data-design="v2"] .ndropitem.active,
html[data-design="v2"] .set-nav-item.active,
html[data-design="v2"] .mb-fin__side-link[data-active="true"],
html[data-design="v2"] .mobile-more-item.is-active {
  background: rgba(43,186,132,.17) !important;
  border-color: transparent !important;
  color: var(--text-1) !important;
}

/* Sidebar (≥641px): emerald left rail */
@media (min-width: 641px){
  html[data-design="v2"] .ntab.active {
    border-left-color: var(--accent-emerald) !important;
  }
  html[data-design="v2"] .ndropitem.active {
    border-left-color: var(--accent-emerald) !important;
  }
}

/* Mobile top nav (≤640px): emerald bottom rail */
@media (max-width: 640px){
  html[data-design="v2"] .ntab.active {
    border-bottom-color: var(--accent-emerald) !important;
  }
}

/* Light-mode equivalents (override 45-modern-premium.css:913-922) */
html[data-design="v2"][data-theme="light"] .ntab.active,
html[data-design="v2"][data-theme="light"] .ndropitem.active,
html[data-design="v2"][data-theme="light"] .set-nav-item.active,
html[data-design="v2"][data-theme="light"] .mb-fin__side-link[data-active="true"],
html[data-design="v2"][data-theme="light"] .mobile-more-item.is-active {
  background: var(--accent-emerald-soft) !important;
  border-color: transparent !important;
  color: var(--text-1) !important;
}


/* ── 1.5 Hover — surface-2 only, no extra shadow or color shift */
html[data-design="v2"] .ntab:hover,
html[data-design="v2"] .ndropitem:hover {
  background: var(--surface-2) !important;
  color: var(--text-1) !important;
}

html[data-design="v2"][data-theme="light"] .ntab:hover,
html[data-design="v2"][data-theme="light"] .ndropitem:hover {
  background: var(--surface-2) !important;
}


/* ── 1.6 Mobile bottom-nav (.mob-bnav) — match the sidebar language.
       Overrides 45-modern-premium.css:414-423 (blur 22px/saturate 150%
       + heavy 0 -18px 54px shadow). */
html[data-design="v2"] .bw-footer,
html[data-design="v2"] .booking-footer,
html[data-design="v2"] .mob-bnav,
html[data-design="v2"] .mobile-more-sheet,
html[data-design="v2"] .mob-drawer {
  background: var(--glass-regular-bg) !important;
  border-color: var(--line-1) !important;
  box-shadow: 0 -8px 24px rgba(0,0,0,.20) !important;
  backdrop-filter: var(--glass-regular-filter) !important;
  -webkit-backdrop-filter: var(--glass-regular-filter) !important;
}

html[data-design="v2"][data-theme="light"] .bw-footer,
html[data-design="v2"][data-theme="light"] .booking-footer,
html[data-design="v2"][data-theme="light"] .mob-bnav,
html[data-design="v2"][data-theme="light"] .mobile-more-sheet,
html[data-design="v2"][data-theme="light"] .mob-drawer {
  background: rgba(255,255,255,.82) !important;
  border-color: var(--line-1) !important;
  box-shadow: 0 -8px 24px rgba(15,28,40,.08) !important;
}

/* Bottom-nav item active state — calmer top rail, accent icon, no overshoot.
   Overrides the heavy gold/emerald glow on .mob-bnav-item::after in
   31-mobile.css:80-92 and the .mob-bnav-item.active fill from
   45-modern-premium.css:367-376. */
@media (max-width: 640px){
  html[data-design="v2"] .mob-bnav-item.active {
    background: transparent !important;        /* no fill — rail + icon do the work */
    border-color: transparent !important;
    color: var(--accent-emerald) !important;
  }
  html[data-design="v2"] .mob-bnav-item::after {
    background: var(--accent-emerald) !important;
    box-shadow: none !important;
  }
  html[data-design="v2"] .mob-bnav-item.active svg {
    transform: translateY(-1px) scale(1.04) !important;
    color: var(--accent-emerald) !important;
  }
}


/* ── 1.7 Icon tint — inactive legible, active accent (sidebar + dropdown items) */
html[data-design="v2"] .ntab svg,
html[data-design="v2"] .ndropitem svg {
  color: var(--text-2) !important;
}
html[data-design="v2"] .ntab.active svg,
html[data-design="v2"] .ndropitem.active svg {
  color: var(--accent-emerald) !important;
}


/* ════════════════════════════════════════════════════════════════════════
   PHASE 2 — Cards, KPIs, Forms

   Replaces gradient-glass card backgrounds and frosted-glass inputs with
   flat surface tokens. Kills KPI orb (.kg) and coloured stripe glow.
   Calms form focus ring to the canonical accent ring.

   Scope: html[data-design="v2"] only — v1 (Klassik) stays pixel-equivalent.
   Reference rules overridden:
     45-modern-premium.css:207-231  (frosted inputs + saturated focus)
     45-modern-premium.css:243-269  (gradient-glass cards + emerald hover glow)
     45-modern-premium.css:1484-1514 (KPI ::before stripe + kval color)
   ════════════════════════════════════════════════════════════════════════ */


/* ── 2.1 KPI tile — kill orb (.kg) and stripe glow (.ks / kpi ::before).
       38-skin.css already handles these in v2 scope, but
       45-modern-premium.css line 1484 reinstates a ::before stripe with
       the premium gradient. We override both layers by load order. */
html[data-design="v2"] .kg {
  display: none !important;
}
html[data-design="v2"] .ks,
html[data-design="v2"] [class*=v] .ks {
  height: 0 !important;
  box-shadow: none !important;
}
html[data-design="v2"] .kpi-card::before,
html[data-design="v2"] .mb-kpi::before,
html[data-design="v2"] .cust-stat::before,
html[data-design="v2"] .tdb-stat-box::before {
  display: none !important;
}

/* KPI value — remove text-shadow glow, neutral text color */
html[data-design="v2"] .kval,
html[data-design="v2"] [class*=v] .kval {
  text-shadow: none !important;
  color: var(--text-1) !important;
}


/* ── 2.2 Card surface — flat surface-1, monochrome border, no heavy shadow.
       45-modern-premium.css:243 uses gradient background + rgba(167,243,208,.14)
       mint border + 0 20px 70px box-shadow with !important on all.
       Equal-specificity + later load order wins. */
html[data-design="v2"] .card,
html[data-design="v2"] .mb-card,
html[data-design="v2"] .kpi,
html[data-design="v2"] .mb-kpi,
html[data-design="v2"] .kpi-card,
html[data-design="v2"] .cust-stat,
html[data-design="v2"] .tdb-stat-box,
html[data-design="v2"] .ta-card,
html[data-design="v2"] .ob-card {
  background: var(--surface-1) !important;
  border: 1px solid var(--line-1) !important;
  border-radius: 16px !important;
  box-shadow: none !important;
}

/* Hover: crisper border only — no emerald glow */
html[data-design="v2"] .card:hover,
html[data-design="v2"] .mb-card:hover,
html[data-design="v2"] .kpi:hover,
html[data-design="v2"] .mb-kpi:hover,
html[data-design="v2"] .kpi-card:hover {
  border-color: var(--line-2) !important;
  box-shadow: none !important;
}

/* Light-mode card — warm-white surface, neutral border */
html[data-design="v2"][data-theme="light"] .card,
html[data-design="v2"][data-theme="light"] .mb-card,
html[data-design="v2"][data-theme="light"] .kpi,
html[data-design="v2"][data-theme="light"] .mb-kpi,
html[data-design="v2"][data-theme="light"] .kpi-card,
html[data-design="v2"][data-theme="light"] .cust-stat,
html[data-design="v2"][data-theme="light"] .tdb-stat-box {
  background: var(--surface-1) !important;
  border-color: var(--line-1) !important;
  box-shadow: none !important;
}


/* ── 2.3 Form inputs — flat surface-1, monochrome border, calm focus ring.
       45-modern-premium.css:207 uses background:rgba(5,27,22,.62) (frosted)
       and border-color:rgba(167,243,208,.16) (pale mint) with !important.
       Focus uses rgba(52,211,153,.62) saturated green border + mb-premium-focus.
       We replace all three with neutral surface tokens. */
html[data-design="v2"] input:not([type=checkbox]):not([type=radio]):not([type=range]),
html[data-design="v2"] select,
html[data-design="v2"] textarea,
html[data-design="v2"] .mb-field__input,
html[data-design="v2"] .mb-field__select,
html[data-design="v2"] .mb-field__textarea,
html[data-design="v2"] .search-inp,
html[data-design="v2"] .filter-select,
html[data-design="v2"] .sa-input {
  background: var(--surface-1) !important;
  border-color: var(--line-2) !important;
  border-radius: 10px !important;
  color: var(--text-1) !important;
}

/* Focus — single calm accent ring, no saturated green */
html[data-design="v2"] input:not([type=checkbox]):not([type=radio]):not([type=range]):focus,
html[data-design="v2"] select:focus,
html[data-design="v2"] textarea:focus,
html[data-design="v2"] .mb-field__input:focus,
html[data-design="v2"] .mb-field__select:focus,
html[data-design="v2"] .mb-field__textarea:focus {
  border-color: var(--accent-emerald) !important;
  box-shadow: 0 0 0 3px var(--accent-emerald-ring) !important;
  outline: none !important;
  background: var(--surface-1) !important;
}

/* Invalid / error state */
html[data-design="v2"] .mb-field--invalid .mb-field__input,
html[data-design="v2"] .mb-field--invalid .mb-field__select,
html[data-design="v2"] .mb-field--invalid .mb-field__textarea,
html[data-design="v2"] .field--invalid input,
html[data-design="v2"] .field--invalid select,
html[data-design="v2"] .field--invalid textarea {
  border-color: var(--status-danger) !important;
  box-shadow: 0 0 0 3px var(--status-danger-soft) !important;
}

/* Placeholder — muted neutral, no mint */
html[data-design="v2"] input::placeholder,
html[data-design="v2"] textarea::placeholder {
  color: var(--text-3) !important;
  opacity: 1 !important;
}

/* Light-mode input adjustments */
html[data-design="v2"][data-theme="light"] input:not([type=checkbox]):not([type=radio]):not([type=range]),
html[data-design="v2"][data-theme="light"] select,
html[data-design="v2"][data-theme="light"] textarea,
html[data-design="v2"][data-theme="light"] .mb-field__input,
html[data-design="v2"][data-theme="light"] .mb-field__select,
html[data-design="v2"][data-theme="light"] .mb-field__textarea {
  background: var(--surface-1) !important;
  border-color: var(--line-2) !important;
  color: var(--text-1) !important;
}