/* La Kombu Ecotienda — component styles (x-lk.* Blade primitives).
   Canonical CSS copied from the design system component .jsx CSS constants.
   Loaded after styles.css (tokens), before app.css. Reference tokens
   only. Components: Button, Badge, Tag, Input, Card, IconButton. */

/* ----------------------------------------------------------------- Button */
.lk-btn{
  font-family: var(--font-body);
  font-weight: 600;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  line-height: 1;
  text-decoration: none;
  transition: background var(--duration-base) var(--ease-out),
              color var(--duration-base) var(--ease-out),
              border-color var(--duration-base) var(--ease-out),
              transform var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out);
  white-space: nowrap;
}
.lk-btn:focus-visible{ outline: none; box-shadow: var(--shadow-focus); }
.lk-btn:active{ transform: translateY(1px); }
.lk-btn[disabled]{ opacity: .5; cursor: not-allowed; transform: none; }

.lk-btn--sm{ font-size: var(--text-sm); padding: 8px 16px; }
.lk-btn--md{ font-size: var(--text-base); padding: 12px 22px; }
.lk-btn--lg{ font-size: var(--text-md); padding: 15px 30px; }

.lk-btn--primary{ background: var(--olive-500); color: var(--cream); }
.lk-btn--primary:hover:not([disabled]){ background: var(--olive-600); }

.lk-btn--secondary{ background: var(--kombu-orange); color: var(--kombu-carbon); }
.lk-btn--secondary:hover:not([disabled]){ background: var(--orange-600); color: var(--cream); }

.lk-btn--outline{ background: transparent; color: var(--kombu-carbon); border-color: var(--kombu-carbon); }
.lk-btn--outline:hover:not([disabled]){ background: var(--kombu-carbon); color: var(--cream); }

.lk-btn--ghost{ background: transparent; color: var(--olive-600); }
.lk-btn--ghost:hover:not([disabled]){ background: var(--olive-50); }

/* Variant used on dark hero backgrounds (outline in cream). */
.lk-btn--on-dark{ color: var(--cream); border-color: var(--cream); }
.lk-btn--on-dark:hover:not([disabled]){ background: var(--cream); color: var(--kombu-carbon); }

/* ------------------------------------------------------------------ Badge */
.lk-badge{
  font-family: var(--font-body);
  display:inline-flex; align-items:center; gap:6px;
  font-weight:700; font-size: var(--text-xs);
  letter-spacing:.04em; text-transform:uppercase;
  padding: 4px 10px; border-radius: var(--radius-pill);
  line-height:1;
}
.lk-badge--olive{ background: var(--olive-500); color: var(--cream); }
.lk-badge--orange{ background: var(--kombu-orange); color: var(--kombu-carbon); }
.lk-badge--honey{ background: var(--honey); color: var(--kombu-carbon); }
.lk-badge--tomato{ background: var(--tomato-500); color: var(--cream); }
.lk-badge--soft{ background: var(--olive-100); color: var(--olive-700); }
.lk-badge--outline{ background: transparent; color: var(--kombu-carbon); box-shadow: inset 0 0 0 1.5px var(--kombu-carbon); }

/* -------------------------------------------------------------------- Tag */
.lk-tag{
  font-family: var(--font-body);
  display:inline-flex; align-items:center; gap:6px;
  font-weight:600; font-size: var(--text-sm);
  padding: 6px 14px; border-radius: var(--radius-pill);
  border:1px solid var(--border-default); background: var(--surface-card);
  color: var(--text-body); cursor:pointer; text-decoration:none;
  transition: background var(--duration-base) var(--ease-out),
              border-color var(--duration-base) var(--ease-out),
              color var(--duration-base) var(--ease-out);
}
.lk-tag:hover{ border-color: var(--olive-400); color: var(--olive-700); }
.lk-tag--active{ background: var(--olive-500); border-color: var(--olive-500); color: var(--cream); }
.lk-tag--active:hover{ color: var(--cream); }

/* ------------------------------------------------------------------ Input */
.lk-field{ font-family: var(--font-body); display:flex; flex-direction:column; gap:6px; }
.lk-field__label{ font-size: var(--text-sm); font-weight:600; color: var(--text-strong); }
.lk-field__input{
  font-family: var(--font-body); font-size: var(--text-base);
  color: var(--text-strong); background: var(--surface-card);
  border:1px solid var(--border-default); border-radius: var(--radius-sm);
  padding: 11px 14px; width:100%; box-sizing:border-box;
  transition: border-color var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out);
}
.lk-field__input::placeholder{ color: var(--text-subtle); }
.lk-field__input:focus{ outline:none; border-color: var(--olive-400); box-shadow: var(--shadow-focus); }
.lk-field__input[aria-invalid="true"]{ border-color: var(--tomato-500); }
.lk-field__hint{ font-size: var(--text-xs); color: var(--text-muted); }
.lk-field__hint--error{ color: var(--tomato-600); }

/* ------------------------------------------------------------------- Card */
.lk-card{ font-family: var(--font-body); background: var(--surface-card);
  border-radius: var(--radius-lg); border:1px solid var(--border-subtle);
  box-shadow: var(--shadow-sm); overflow:hidden;
  transition: transform var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out); }
.lk-card--pad{ padding: var(--space-5); }
.lk-card--hover:hover{ transform: translateY(-3px); box-shadow: var(--shadow-md); }
.lk-card--flat{ box-shadow:none; }
.lk-card--olive{ background: var(--olive-500); color: var(--cream); border-color: transparent; }
.lk-card--carbon{ background: var(--kombu-carbon); color: var(--cream); border-color: transparent; }

/* ------------------------------------------------------------- IconButton */
.lk-iconbtn{
  font-family: var(--font-body);
  display:inline-flex; align-items:center; justify-content:center;
  border-radius: var(--radius-pill);
  border:1px solid transparent;
  background: transparent; color: var(--kombu-carbon);
  cursor:pointer; text-decoration:none;
  transition: background var(--duration-base) var(--ease-out),
              color var(--duration-base) var(--ease-out),
              transform var(--duration-fast) var(--ease-out);
}
.lk-iconbtn:hover:not([disabled]){ background: var(--neutral-100); }
.lk-iconbtn:active{ transform: translateY(1px); }
.lk-iconbtn:focus-visible{ outline:none; box-shadow: var(--shadow-focus); }
.lk-iconbtn[disabled]{ opacity:.5; cursor:not-allowed; }
.lk-iconbtn--sm{ width:34px; height:34px; }
.lk-iconbtn--md{ width:42px; height:42px; }
.lk-iconbtn--lg{ width:50px; height:50px; }
.lk-iconbtn--solid{ background: var(--olive-500); color: var(--cream); }
.lk-iconbtn--solid:hover:not([disabled]){ background: var(--olive-600); }
.lk-iconbtn--outline{ border-color: var(--border-default); }
.lk-iconbtn--outline:hover:not([disabled]){ background: var(--neutral-100); }