/* ══════════════════════════════════════════════
   BEMO — Design System v2  ·  Light Theme 2026
══════════════════════════════════════════════ */

/* ── Tokens ── */
:root {
  /* Backgrounds */
  --b-bg:        #F0F2F5;
  --b-surface:   #FFFFFF;
  --b-surface-2: #F8F9FB;

  /* Borders */
  --b-border:    #E5E7EB;
  --b-border-2:  #D1D5DB;

  /* Text */
  --b-text:   #111827;
  --b-text-2: #6B7280;
  --b-text-3: #9CA3AF;

  /* Accents */
  --b-accent:       #6366F1;   /* indigo — interactive */
  --b-accent-light: #EEF0FE;   /* indigo tint */
  --b-accent-txt:   #FFFFFF;
  --b-gold:         #D4A84B;   /* BEMO brand gold */
  --b-gold-light:   #FBF3E2;

  /* Status */
  --b-green:  #10B981;
  --b-red:    #EF4444;
  --b-orange: #F59E0B;

  /* Elevation */
  --b-shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --b-shadow:    0 2px 8px rgba(0,0,0,0.07),  0 1px 3px rgba(0,0,0,0.04);
  --b-shadow-md: 0 8px 24px rgba(0,0,0,0.08);
  --b-shadow-lg: 0 16px 48px rgba(0,0,0,0.12);

  /* Radii */
  --b-r-sm: 8px;
  --b-r-md: 12px;
  --b-r-lg: 16px;
  --b-r-xl: 20px;

  /* Timing */
  --b-tr: all 0.18s ease;
}

/* ── Reset ── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

/* ── Scrollbar ── */
::-webkit-scrollbar { width:5px; height:5px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--b-border-2); border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background:var(--b-text-3); }

/* ══ COMPONENTS ══ */

/* ── Card ── */
.bemo-card {
  background: var(--b-surface);
  border: 1px solid var(--b-border);
  border-radius: var(--b-r-lg);
  box-shadow: var(--b-shadow);
}

/* ── Buttons ── */
.bemo-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 22px; border-radius: 50px;
  font-size: 14px; font-weight: 700; font-family: inherit;
  border: none; cursor: pointer; transition: var(--b-tr);
  text-decoration: none; white-space: nowrap;
}
.bemo-btn-accent {
  background: var(--b-accent); color: var(--b-accent-txt);
}
.bemo-btn-accent:hover { opacity: 0.88; }

.bemo-btn-gold {
  background: var(--b-gold); color: #1C1917;
}
.bemo-btn-gold:hover { opacity: 0.88; }

.bemo-btn-ghost {
  background: transparent; color: var(--b-text-2);
  border: 1.5px solid var(--b-border);
}
.bemo-btn-ghost:hover { border-color: var(--b-accent); color: var(--b-accent); }

/* ── Input ── */
.bemo-input {
  width: 100%; padding: 11px 14px;
  background: var(--b-surface-2); border: 1.5px solid var(--b-border);
  border-radius: var(--b-r-sm); color: var(--b-text);
  font-size: 14px; font-family: inherit; outline: none;
  transition: var(--b-tr);
}
.bemo-input:focus {
  border-color: var(--b-accent); background: var(--b-surface);
  box-shadow: 0 0 0 3px rgba(99,102,241,0.08);
}
.bemo-input::placeholder { color: var(--b-text-3); }
.bemo-input.err { border-color: var(--b-red); }

/* ── Label ── */
.bemo-label {
  display: block; font-size: 11px; font-weight: 700;
  color: var(--b-text-2); letter-spacing: 0.8px;
  text-transform: uppercase; margin-bottom: 6px;
}

/* ── Badge ── */
.bemo-badge {
  display: inline-flex; align-items: center;
  padding: 3px 10px; border-radius: 50px;
  font-size: 11px; font-weight: 700;
}
.bemo-badge-accent { background: var(--b-accent-light); color: var(--b-accent); }
.bemo-badge-gold   { background: var(--b-gold-light);   color: #92670A; }
.bemo-badge-green  { background: rgba(16,185,129,0.1);  color: #059669; }
.bemo-badge-red    { background: rgba(239,68,68,0.1);   color: #DC2626; }
.bemo-badge-gray   { background: var(--b-surface-2);    color: var(--b-text-2); border: 1px solid var(--b-border); }

/* ── Sidebar ── */
.bemo-sidebar {
  background: var(--b-surface);
  border-right: 1px solid var(--b-border);
}
.bemo-sidebar .nav-item { color: var(--b-text-2); }
.bemo-sidebar .nav-item:hover { background: var(--b-bg); color: var(--b-text); }
.bemo-sidebar .nav-item.active {
  background: var(--b-accent-light);
  color: var(--b-accent);
}
.bemo-sidebar .nav-item.active svg { opacity: 1; color: var(--b-accent); }

/* ── Divider ── */
.bemo-divider {
  border: none; border-top: 1px solid var(--b-border); margin: 16px 0;
}

/* ── Chip / Pill ── */
.bemo-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px; border-radius: 50px; font-size: 12px; font-weight: 600;
  background: var(--b-surface-2); color: var(--b-text-2);
  border: 1px solid var(--b-border);
}

/* ── Avatar ── */
.bemo-avatar {
  border-radius: 50%; background: var(--b-accent); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; flex-shrink: 0;
}

/* ── Toast / Alert ── */
.bemo-alert {
  padding: 12px 16px; border-radius: var(--b-r-md);
  font-size: 13px; font-weight: 600;
  border-left: 3px solid;
}
.bemo-alert-err    { background: rgba(239,68,68,0.07);  border-color: var(--b-red);   color: #B91C1C; }
.bemo-alert-ok     { background: rgba(16,185,129,0.07); border-color: var(--b-green); color: #065F46; }
.bemo-alert-info   { background: var(--b-accent-light); border-color: var(--b-accent);color: #3730A3; }
.bemo-alert-warn   { background: rgba(245,158,11,0.07); border-color: var(--b-orange);color: #92400E; }

/* ── Glassmorphism card ── */
.bemo-glass {
  background: rgba(255,255,255,0.72);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.55);
  border-radius: var(--b-r-lg);
  box-shadow: var(--b-shadow-md);
}

/* ── Section header ── */
.bemo-section-hd {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 20px;
}
.bemo-section-hd h2 {
  font-size: 17px; font-weight: 800; color: var(--b-text);
}

/* ── Empty state ── */
.bemo-empty {
  text-align: center; padding: 64px 20px;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.bemo-empty-icon { font-size: 40px; opacity: 0.3; }
.bemo-empty-title { font-size: 16px; font-weight: 700; color: var(--b-text); }
.bemo-empty-sub   { font-size: 13px; color: var(--b-text-2); }

/* ── Skeleton loading ── */
.bemo-skeleton {
  background: linear-gradient(90deg, var(--b-border) 25%, var(--b-surface-2) 50%, var(--b-border) 75%);
  background-size: 200% 100%;
  animation: bemo-shimmer 1.4s infinite;
  border-radius: var(--b-r-sm);
}
@keyframes bemo-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── Focus visible ring ── */
:focus-visible {
  outline: 2px solid var(--b-accent);
  outline-offset: 2px;
}