/* ============================================================
   ATREE — Component styles
   Consumed automatically via styles.css. React primitives in
   /components reference these classes (keeps the JSX thin and
   hover/focus states in real CSS).
   ============================================================ */

/* ---------------- Icon ---------------- */
.atree-icon{ display:inline-block;vertical-align:middle;flex:none; }

/* ---------------- Button ---------------- */
.atree-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:0.5em;
  font-family:var(--font-sans);font-weight:var(--fw-bold);
  border:1px solid transparent;border-radius:var(--radius-pill);
  cursor:pointer;text-decoration:none;white-space:nowrap;
  transition:background var(--dur-fast) var(--ease-standard),
             color var(--dur-fast) var(--ease-standard),
             border-color var(--dur-fast) var(--ease-standard),
             transform var(--dur-fast) var(--ease-standard);
}
.atree-btn:active{ transform:translateY(1px); }
.atree-btn:focus-visible{ outline:none; box-shadow:var(--focus-ring); }
.atree-btn[disabled],.atree-btn[aria-disabled="true"]{ opacity:0.45;cursor:not-allowed;pointer-events:none; }
.atree-btn .atree-icon{ width:1.15em;height:1.15em; }

/* sizes */
.atree-btn--sm{ font-size:var(--text-sm);  padding:0.45em 0.95em; }
.atree-btn--md{ font-size:var(--text-base);padding:0.6em 1.3em; }
.atree-btn--lg{ font-size:var(--text-lg);  padding:0.72em 1.6em; }

/* variants */
.atree-btn--primary{ background:var(--brand-primary);color:#fff; }
.atree-btn--primary:hover{ background:var(--brand-primary-hover); }
.atree-btn--accent{ background:var(--brand-accent);color:var(--atree-forest-900); }
.atree-btn--accent:hover{ background:var(--atree-lime-700);color:#fff; }
.atree-btn--secondary{ background:var(--white);color:var(--text-strong);border-color:var(--border-strong); }
.atree-btn--secondary:hover{ background:var(--ink-50);border-color:var(--ink-400); }
.atree-btn--ghost{ background:transparent;color:var(--brand-primary); }
.atree-btn--ghost:hover{ background:var(--atree-green-100); }
.atree-btn--inverse{ background:var(--white);color:var(--atree-forest); }
.atree-btn--inverse:hover{ background:var(--ink-50); }

/* ---------------- Badge ---------------- */
.atree-badge{
  display:inline-flex;align-items:center;gap:0.4em;
  font-family:var(--font-sans);font-weight:var(--fw-bold);
  font-size:var(--text-xs);line-height:1;letter-spacing:0.01em;
  padding:0.4em 0.7em;border-radius:var(--radius-pill);white-space:nowrap;
}
.atree-badge .atree-icon{ width:1.1em;height:1.1em; }
.atree-badge--neutral{ background:var(--ink-100);color:var(--ink-700); }
.atree-badge--brand{ background:var(--atree-green-100);color:var(--brand-primary-hover); }
.atree-badge--success{ background:var(--status-success-bg);color:var(--atree-green-700); }
.atree-badge--info{ background:var(--status-info-bg);color:var(--atree-river-700); }
.atree-badge--warning{ background:var(--status-warning-bg);color:#8a6f06; }
.atree-badge--danger{ background:var(--status-danger-bg);color:var(--atree-rust-700); }
.atree-badge--solid{ background:var(--brand-primary);color:#fff; }

/* ---------------- Tag (outline chip) ---------------- */
.atree-tag{
  display:inline-flex;align-items:center;gap:0.45em;
  font-family:var(--font-sans);font-weight:var(--fw-bold);font-size:var(--text-sm);
  padding:0.38em 0.85em;border-radius:var(--radius-pill);
  background:var(--white);border:1px solid var(--border-strong);color:var(--text-body);
}
.atree-tag__dot{ width:8px;height:8px;border-radius:50%;background:var(--brand-primary); }
.atree-tag__x{
  display:inline-flex;border:0;background:none;cursor:pointer;color:var(--text-subtle);
  padding:0;margin-left:0.1em;font-size:1em;line-height:0;
}
.atree-tag__x:hover{ color:var(--status-danger); }

/* ---------------- IconBadge (signature green disc) ---------------- */
.atree-iconbadge{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  border-radius:var(--radius-circle);line-height:0;
}
.atree-iconbadge--lime{ background:var(--atree-lime); color:var(--atree-forest); }
.atree-iconbadge--green{ background:var(--atree-green); color:#fff; }
.atree-iconbadge--forest{ background:var(--atree-forest); color:var(--atree-lime); }
.atree-iconbadge--soft{ background:var(--atree-green-100); color:var(--brand-primary-hover); }
.atree-iconbadge--river{ background:var(--atree-river); color:#fff; }
.atree-iconbadge--sm{ width:36px;height:36px; }
.atree-iconbadge--md{ width:52px;height:52px; }
.atree-iconbadge--lg{ width:72px;height:72px; }
.atree-iconbadge .atree-icon{ width:54%;height:54%; }

/* ---------------- Card ---------------- */
.atree-card{
  background:var(--color-surface);border:1px solid var(--border);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);
  overflow:hidden;display:flex;flex-direction:column;
}
.atree-card--flat{ box-shadow:none; }
.atree-card--raised{ box-shadow:var(--shadow-md);border-color:transparent; }
.atree-card--interactive{ transition:box-shadow var(--dur-normal) var(--ease-standard),transform var(--dur-normal) var(--ease-standard);cursor:pointer; }
.atree-card--interactive:hover{ box-shadow:var(--shadow-lg);transform:translateY(-3px); }
.atree-card__accent{ height:5px;background:var(--brand-primary); }
.atree-card__media{ width:100%;aspect-ratio:16/9;object-fit:cover;background:var(--ink-100); }
.atree-card__body{ padding:var(--space-6);display:flex;flex-direction:column;gap:var(--space-3);flex:1; }
.atree-card__title{ font-weight:var(--fw-bold);font-size:var(--text-xl);color:var(--text-strong);margin:0;line-height:1.2; }
.atree-card__text{ font-size:var(--text-base);color:var(--text-muted);margin:0;line-height:1.55; }
.atree-card__footer{ display:flex;align-items:center;gap:var(--space-3);padding:var(--space-4) var(--space-6);border-top:1px solid var(--border); }

/* ---------------- Input / Field ---------------- */
.atree-field{ display:flex;flex-direction:column;gap:var(--space-2);font-family:var(--font-sans); }
.atree-field__label{ font-size:var(--text-sm);font-weight:var(--fw-bold);color:var(--text-strong); }
.atree-field__hint{ font-size:var(--text-xs);color:var(--text-muted); }
.atree-input{
  font-family:var(--font-sans);font-size:var(--text-base);color:var(--text-strong);
  background:var(--white);border:1px solid var(--border-strong);
  border-radius:var(--radius-md);padding:0.62em 0.85em;width:100%;
  transition:border-color var(--dur-fast) var(--ease-standard),box-shadow var(--dur-fast) var(--ease-standard);
}
.atree-input::placeholder{ color:var(--text-subtle); }
.atree-input:focus{ outline:none;border-color:var(--brand-primary);box-shadow:var(--focus-ring); }
.atree-input[aria-invalid="true"]{ border-color:var(--status-danger); }
.atree-input[disabled]{ background:var(--ink-50);color:var(--text-subtle);cursor:not-allowed; }

/* ---------------- Stat ---------------- */
.atree-stat{ font-family:var(--font-sans);display:flex;flex-direction:column;gap:4px; }
.atree-stat__value{ font-weight:var(--fw-heavy);font-size:var(--text-4xl);line-height:1;color:var(--brand-forest);letter-spacing:-0.02em;white-space:nowrap; }
.atree-stat__label{ font-size:var(--text-sm);color:var(--text-muted);font-weight:var(--fw-book); }
.atree-stat--accent .atree-stat__value{ color:var(--brand-primary); }
.atree-stat--water .atree-stat__value{ color:var(--brand-water); }
.atree-stat--earth .atree-stat__value{ color:var(--brand-earth); }