/* brand.css — SheIsLI brand tokens + components for the nine-grid / four-grid pages.
   Scoped to body.ng-page / body.fg-page so the legacy index page is never affected.
   Component classes use the .b- prefix to avoid clashing with style.css
   (.modal / .toast / .toolbar there have different semantics). */

body.ng-page, body.fg-page {
  /* Apple palette (apple.com light); brand mark stays champagne gold */
  --brand-bg: #f5f5f7;
  --brand-surface: #ffffff;
  --brand-surface-2: #e8e8ed;
  --brand-border: #d2d2d7;
  --brand-border-strong: #b0b0b7;
  --brand-text: #1d1d1f;
  --brand-text-2: #6e6e73;
  --brand-text-3: #86868b;
  --brand-accent: #2997ff;
  --brand-accent-deep: #0071e3;
  --brand-accent-deep-hover: #0077ed;
  --brand-accent-soft: #e8f0fb;
  --brand-accent-faint: rgba(0, 113, 227, 0.06);
  --brand-success: #34c759;
  --brand-success-hover: #2db350;
  --brand-success-soft: #e6f8ec;
  --brand-warning: #b25000;
  --brand-warning-soft: #fff4e5;
  --brand-danger: #ff3b30;
  --brand-danger-hover: #e0342b;
  --brand-danger-soft: #ffeceb;

  --brand-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
  --brand-shadow-md: 0 4px 24px rgba(0, 0, 0, 0.08);
  --brand-shadow-pop: 0 12px 32px rgba(0, 0, 0, 0.14);
  --brand-shadow-sheet: 0 24px 60px rgba(0, 0, 0, 0.22);
  --brand-shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.16);
  --brand-radius: 6px;
  --brand-radius-lg: 8px;
  --brand-radius-img: 10px;
  --brand-radius-card: 18px;
  --brand-radius-sheet: 20px;
  --brand-radius-pill: 999px;
  --brand-glass: rgba(255, 255, 255, 0.72);
  --brand-glass-border: rgba(0, 0, 0, 0.08);
  --brand-ease: cubic-bezier(0.28, 0.11, 0.32, 1);
  --brand-dur: 150ms;

  background: var(--brand-bg);
  color: var(--brand-text);
}

body.ng-page :focus-visible, body.fg-page :focus-visible {
  outline: 2px solid var(--brand-accent-deep);
  outline-offset: 1px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  body.ng-page *, body.ng-page *::before, body.ng-page *::after,
  body.fg-page *, body.fg-page *::before, body.fg-page *::after {
    transition: none !important;
    animation: none !important;
  }
}

/* ---------- brand logo in the toolbar ---------- */
.b-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-right: 4px;
  user-select: none;
}
.b-brand img { display: block; width: 24px; height: 24px; border-radius: 4px; }
.b-brand span {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--brand-text);
}

/* ---------- badges ---------- */
.b-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 8px;
  font-size: 11px;
  font-weight: 500;
  border-radius: 999px;
  background: var(--brand-accent-soft);
  color: var(--brand-accent-deep);
}
.b-badge-warning { background: var(--brand-warning-soft); color: var(--brand-warning); }
.b-badge-success { background: var(--brand-success-soft); color: var(--brand-success); }
.b-badge-danger  { background: var(--brand-danger-soft);  color: var(--brand-danger); }
.b-badge .b-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.b-badge-running .b-dot { animation: b-pulse 1.2s ease-in-out infinite; }
@keyframes b-pulse { 50% { opacity: 0.3; } }