/* Elevanta components without the global body rule (see components.css). */
@import url("https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500&family=JetBrains+Mono:wght@400&display=swap");


.el-btn { display: inline-flex; align-items: center; gap: var(--space-2); height: 44px; padding: 0 var(--space-5); border-radius: var(--radius-sm); font: 500 15px/1 var(--font-display); letter-spacing: -0.005em; cursor: pointer; border: var(--hairline) solid transparent; text-decoration: none; }
.el-btn--primary { background: var(--signal-strong); color: var(--on-signal); }
.el-btn--secondary { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.el-btn--ghost { background: transparent; color: var(--ink-2); padding: 0 var(--space-3); }
.el-btn--sm { height: 36px; padding: 0 var(--space-4); font-size: 14px; }
.el-btn:focus-visible, .el-input:focus-visible { outline: 2px solid var(--signal-ink); outline-offset: 2px; }

.el-label { font: 400 12px/1.4 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.el-badge { display: inline-flex; align-items: center; gap: var(--space-1); padding: 3px var(--space-2); border-radius: var(--radius-xs); font: 400 12px/1.4 var(--font-mono); letter-spacing: 0.04em; background: var(--surface-2); color: var(--ink-2); }
.el-badge--signal { background: var(--signal-soft); color: var(--signal-ink); }

.el-field { display: flex; flex-direction: column; gap: var(--space-2); }
.el-field__label { font-size: 14px; color: var(--ink-2); }
.el-input { height: 44px; padding: 0 var(--space-3); border-radius: var(--radius-sm); border: var(--hairline) solid var(--line-strong); background: var(--surface-1); color: var(--ink); font: 400 16px var(--font-display); }
.el-input::placeholder { color: var(--ink-3); }

.el-card { background: var(--surface-1); border: var(--hairline) solid var(--line); border-radius: var(--radius-md); padding: var(--space-5); }
.el-metric { font: 400 56px/1 var(--font-mono); letter-spacing: -0.03em; color: var(--ink); }
.el-metric--signal { color: var(--signal-ink); }
.el-up { color: var(--positive); font: 400 14px/1.5 var(--font-mono); }

.el-bars { display: flex; flex-direction: column; gap: 6px; }
.el-bars span { display: block; height: 14px; border-radius: var(--radius-xs); background: var(--line); }
.el-bars span.is-signal { background: var(--signal); }