/* ==========================================================================
   Extra Dollar — shared component classes.
   Used by the reusable React primitives in /components and available to any
   consumer that links styles.css. All values reference --ed-* tokens.
   ========================================================================== */

/* ---------- Button ---------- */
.ed-btn {
  font-family: var(--ed-font-sans);
  font-weight: 600;
  border-radius: var(--ed-radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ed-space-2);
  white-space: nowrap;
  line-height: 1;
  transition: background-color var(--ed-dur-base) var(--ed-ease-out),
              color var(--ed-dur-base) var(--ed-ease-out),
              border-color var(--ed-dur-base) var(--ed-ease-out),
              transform var(--ed-dur-fast) var(--ed-ease-out),
              box-shadow var(--ed-dur-base) var(--ed-ease-out);
}
.ed-btn--sm { font-size: var(--ed-text-sm); padding: 8px 14px; border-radius: var(--ed-radius-sm); }
.ed-btn--md { font-size: 15px; padding: 12px 22px; }
.ed-btn--lg { font-size: var(--ed-text-md); padding: 16px 28px; border-radius: 14px; }
.ed-btn--pill { border-radius: var(--ed-radius-pill); }
.ed-btn:active { transform: scale(0.98); }
.ed-btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }

.ed-btn--primary { background: var(--ed-forest-800); color: var(--ed-cream-200); }
.ed-btn--primary:hover:not(:disabled) { background: var(--ed-forest-900); }
.ed-btn--accent { background: var(--ed-bill-500); color: var(--ed-forest-900); }
.ed-btn--accent:hover:not(:disabled) { background: var(--ed-bill-600); }
.ed-btn--secondary { background: var(--ed-white); color: var(--ed-forest-800); border-color: var(--ed-line-strong); }
.ed-btn--secondary:hover:not(:disabled) { background: var(--ed-cream-200); }
.ed-btn--ghost { background: transparent; color: var(--ed-forest-800); }
.ed-btn--ghost:hover:not(:disabled) { background: rgba(6, 57, 50, 0.06); }
.ed-btn--ghost-on-dark { background: transparent; color: var(--ed-cream-200); border-color: var(--ed-line-on-dark); }
.ed-btn--ghost-on-dark:hover:not(:disabled) { background: rgba(238, 230, 227, 0.08); }

/* ---------- Badge / Pill ---------- */
.ed-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--ed-space-2);
  padding: 6px 12px;
  border-radius: var(--ed-radius-pill);
  font-size: var(--ed-text-xs);
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1;
}
.ed-badge__dot { width: 6px; height: 6px; border-radius: var(--ed-radius-pill); background: currentColor; }
.ed-badge--neutral { background: var(--ed-cream-200); color: var(--ed-fg-2); }
.ed-badge--accent  { background: var(--ed-bill-200);  color: var(--ed-forest-800); }
.ed-badge--new     { background: var(--ed-yellow);    color: var(--ed-forest-900); }
.ed-badge--dark    { background: var(--ed-forest-800); color: var(--ed-cream-200); }
.ed-badge--success { background: var(--ed-success-bg); color: var(--ed-success); }
.ed-badge--warning { background: var(--ed-warning-bg); color: #8a5e0e; }
.ed-badge--danger  { background: var(--ed-danger-bg);  color: var(--ed-danger); }

/* ---------- Card ---------- */
.ed-card {
  background: var(--ed-surface);
  border-radius: var(--ed-radius-lg);
  padding: var(--ed-space-6);
  box-shadow: var(--ed-shadow-sm);
}
.ed-card--bordered { box-shadow: none; border: 1px solid var(--ed-line); }
.ed-card--cream { background: var(--ed-surface-2); }
.ed-card--dark { background: var(--ed-forest-800); color: var(--ed-fg-on-dark); }
.ed-card--interactive { transition: transform var(--ed-dur-base) var(--ed-ease-out), box-shadow var(--ed-dur-base) var(--ed-ease-out); cursor: pointer; }
.ed-card--interactive:hover { transform: translateY(-2px); box-shadow: var(--ed-shadow-md); }

/* ---------- Field / Input ---------- */
.ed-field { display: flex; flex-direction: column; gap: 6px; }
.ed-field__label { font-size: var(--ed-text-xs); font-weight: 700; color: var(--ed-fg-2); letter-spacing: 0.02em; }
.ed-field__hint { font-size: var(--ed-text-xs); color: var(--ed-fg-3); }
.ed-field--error .ed-field__hint { color: var(--ed-danger); }

.ed-input {
  font-family: inherit;
  font-size: 15px;
  padding: 12px 14px;
  border-radius: var(--ed-radius-md);
  border: 1px solid var(--ed-line-strong);
  background: var(--ed-white);
  color: var(--ed-fg);
  width: 100%;
  transition: border-color var(--ed-dur-fast) var(--ed-ease-out), box-shadow var(--ed-dur-fast) var(--ed-ease-out);
}
.ed-input:focus { outline: none; border-color: var(--ed-forest-800); box-shadow: 0 0 0 3px rgba(6, 57, 50, 0.12); }
.ed-field--error .ed-input { border-color: var(--ed-danger); }
.ed-input--money-wrap { display: flex; align-items: center; background: var(--ed-white); border: 1px solid var(--ed-line-strong); border-radius: var(--ed-radius-md); padding: 0 14px; }
.ed-input--money-wrap > .ed-input--prefix { color: var(--ed-fg-3); font-weight: 700; }
.ed-input--money-wrap > input { border: none; box-shadow: none; padding: 12px 6px; background: transparent; font-feature-settings: "tnum", "lnum"; font-weight: 700; }
.ed-input--money-wrap > input:focus { box-shadow: none; }

/* ---------- Stat ---------- */
.ed-stat__label { font-size: var(--ed-text-xs); font-weight: 700; letter-spacing: var(--ed-tracking-caps); text-transform: uppercase; color: var(--ed-fg-3); }
.ed-stat__value { font-family: var(--ed-font-numeric); font-feature-settings: "tnum", "lnum"; font-weight: 800; font-size: 42px; letter-spacing: -0.02em; line-height: 1; margin-top: 6px; color: var(--ed-fg); }
.ed-stat__delta { margin-top: var(--ed-space-2); font-size: var(--ed-text-sm); font-weight: 600; }
.ed-stat__delta--pos { color: var(--ed-bill-700); }
.ed-stat__delta--neg { color: var(--ed-danger); }