/**
 * Newabodes — shared brand tokens (public site).
 * Load early; page skins (index-2, property-list1) may extend these.
 */
:root {
  --na-teal: #0d9488;
  --na-teal-dark: #0f766e;
  --na-teal-mid: #14b8a6;
  --na-teal-soft: #ccfbf1;
  --na-teal-wash: #ecfdf5;
  --na-teal-ink: #115e59;
  --na-ivory: #faf8f3;
  --na-charcoal: #222831;
  --na-ink: #0c1222;
  --na-muted: #64748b;
  --na-line: rgba(15, 23, 42, 0.08);
  --na-line-strong: rgba(15, 23, 42, 0.12);
  --na-font: "Plus Jakarta Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --na-focus-color: var(--na-teal);
  --na-focus-ring: 0 0 0 3px rgba(13, 148, 136, 0.32);
  --na-radius-sm: 10px;
  --na-radius-md: 12px;
  --na-radius-pill: 999px;
  --na-gradient-brand: linear-gradient(135deg, var(--na-teal-mid) 0%, var(--na-teal-dark) 100%);
  --na-gradient-footer: linear-gradient(135deg, var(--na-teal-dark) 0%, var(--na-teal) 100%);
  --na-serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --na-space-section: clamp(1.75rem, 3vw, 2.25rem);
  --na-radius-lg: 18px;
  --na-shadow-card: 0 12px 40px rgba(15, 118, 110, 0.07), 0 4px 14px rgba(15, 23, 42, 0.05);
  --na-ease-lux: cubic-bezier(0.22, 1, 0.36, 1);
  --na-dur-lux: 0.2s;
  /* Mobile bottom nav — single height token (was 64 vs 70 elsewhere) */
  --na-mbn-height: 64px;

  /* ── Dashboard status system (shared: admin + seller panel) ──
     Each family = soft surface bg + border + readable ink text. Used by
     .badge/.pill/.chip variants and status accents in admin-refined.css
     (admin) and panel-refined.css (seller panel) so the two panels match. */
  --na-st-neutral-bg: #f1f5f9;
  --na-st-neutral-bd: #dbe4ef;
  --na-st-neutral-tx: #475569;
  --na-st-info-bg: #eff6ff;
  --na-st-info-bd: #bfdbfe;
  --na-st-info-tx: #1d4ed8;
  --na-st-success-bg: #ecfdf5;
  --na-st-success-bd: #99f6e4;
  --na-st-success-tx: #0f766e;
  --na-st-warn-bg: #fffbeb;
  --na-st-warn-bd: #fde68a;
  --na-st-warn-tx: #b45309;
  --na-st-danger-bg: #fef2f2;
  --na-st-danger-bd: #fecaca;
  --na-st-danger-tx: #be123c;
  --na-st-critical-bg: #fee2e2;
  --na-st-critical-bd: #fca5a5;
  --na-st-critical-tx: #991b1b;

  /* Dashboard spacing rhythm + elevation (shared scale) */
  --na-dash-gap: 16px;
  --na-card-pad: 20px;
  --na-card-pad-sm: 16px;
  --na-shadow-e1: 0 1px 2px rgba(15, 23, 42, 0.04), 0 4px 14px rgba(15, 23, 42, 0.05);
  --na-shadow-e2: 0 10px 28px rgba(15, 23, 42, 0.08);
}

.na-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10050;
  padding: 10px 14px;
  background: var(--na-teal-dark, #0f766e);
  color: #ecfdf5;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  border-radius: 0 0 8px 0;
}
.na-skip-link:focus {
  left: 0;
  outline: 2px solid #fff;
  outline-offset: 2px;
}

body.na-skin-v2 {
  font-family: var(--na-font);
  color: var(--na-charcoal);
  background:
    radial-gradient(1200px 520px at 8% -8%, rgba(13, 148, 136, 0.07) 0, transparent 55%),
    radial-gradient(900px 420px at 96% 12%, rgba(15, 118, 110, 0.05) 0, transparent 50%),
    linear-gradient(180deg, var(--na-ivory, #faf8f3) 0%, #f8fafc 42%, #f1f5f9 100%);
  -webkit-font-smoothing: antialiased;
}

/* Keep Font Awesome glyphs when parent sets a text font (listings header, SERP skin, serif headings) */
.fa,
.fas,
.far,
.fal,
.fa-solid,
.fa-regular,
.fa-light {
  font-family: "Font Awesome 6 Free" !important;
  font-style: normal;
}
.fa,
.fas,
.fa-solid {
  font-weight: 900;
}
.far,
.fa-regular {
  font-weight: 400;
}
.fal,
.fa-light {
  font-weight: 300;
}
.fab,
.fa-brands {
  font-family: "Font Awesome 6 Brands" !important;
  font-weight: 400;
  font-style: normal;
}

.na-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.na-focus-visible:focus {
  outline: none;
}

.na-focus-visible:focus-visible {
  outline: 2px solid var(--na-focus-color);
  outline-offset: 2px;
  box-shadow: var(--na-focus-ring);
}