/* =========================================================================
   LUI — Component library (class-based, token-driven)
   Reusable primitives for web (Shopify/Liquid), the DC UI kits and slides.
   Everything here is built on tokens from tokens/*.css. Editorial + restrained:
   squared surfaces, hairline borders, teal ink, calm motion.
   ========================================================================= */

/* ----------------------------------------------------------------- Buttons */
.lui-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-sans); font-size: var(--text-sm); font-weight: var(--fw-semibold);
  line-height: 1; letter-spacing: 0.01em;
  padding: 13px 22px; border: var(--border-w) solid transparent;
  background: var(--brand); color: var(--brand-on); 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);
}
.lui-btn:hover { background: var(--brand-strong); color: var(--brand-on); }
.lui-btn:active { transform: translateY(1px); }
.lui-btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

.lui-btn--secondary { background: transparent; color: var(--brand); border-color: var(--brand); }
.lui-btn--secondary:hover { background: var(--brand); color: var(--brand-on); }

.lui-btn--ghost { background: transparent; color: var(--brand); border-color: transparent; padding-inline: 14px; }
.lui-btn--ghost:hover { background: var(--brand-tint); color: var(--brand-strong); }

.lui-btn--inverse { background: var(--white); color: var(--brand); }
.lui-btn--inverse:hover { background: var(--brand-tint); color: var(--brand-strong); }

.lui-btn--inverse-outline { background: transparent; color: var(--white); border-color: var(--border-inverse); }
.lui-btn--inverse-outline:hover { background: rgba(255,255,255,.12); color: #fff; }

.lui-btn--danger { background: var(--danger-500); color: #fff; }
.lui-btn--danger:hover { background: var(--danger-600); }

.lui-btn--square { border-radius: var(--radius-sm); }
.lui-btn--sm { font-size: var(--text-xs); padding: 9px 16px; }
.lui-btn--lg { font-size: var(--text-base); padding: 16px 30px; }
.lui-btn--block { display: flex; width: 100%; }
.lui-btn:disabled, .lui-btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }

.lui-iconbtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: var(--radius-pill);
  border: var(--border-w) solid var(--border); background: var(--white); color: var(--brand);
  cursor: pointer; transition: background var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard);
}
.lui-iconbtn:hover { background: var(--brand-tint); border-color: var(--border-strong); }
.lui-iconbtn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

.lui-link {
  color: var(--brand); font-weight: var(--fw-medium);
  border-bottom: 1px solid currentColor; padding-bottom: 1px;
  transition: color var(--dur-fast) var(--ease-standard);
}
.lui-link:hover { color: var(--brand-strong); }

/* ------------------------------------------------------------------- Forms */
.lui-field { display: flex; flex-direction: column; gap: 7px; }
.lui-label { font-size: var(--text-sm); font-weight: var(--fw-medium); color: var(--text-strong); }
.lui-label .req { color: var(--danger-500); }
.lui-input, .lui-textarea, .lui-select {
  font-family: var(--font-sans); font-size: var(--text-base); color: var(--text-primary);
  background: var(--white); border: var(--border-w) solid var(--border-strong);
  border-radius: var(--radius-sm); padding: 12px 14px; width: 100%;
  transition: border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard);
}
.lui-textarea { min-height: 108px; resize: vertical; line-height: var(--leading-normal); }
.lui-input::placeholder, .lui-textarea::placeholder { color: var(--text-subtle); }
.lui-input:hover, .lui-textarea:hover, .lui-select:hover { border-color: var(--brand-strong); }
.lui-input:focus, .lui-textarea:focus, .lui-select:focus {
  outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(4,82,101,.14);
}
.lui-select {
  appearance: none; padding-right: 40px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23045265' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}
.lui-help { font-size: var(--text-xs); color: var(--text-muted); }
.lui-field--error .lui-input, .lui-field--error .lui-textarea, .lui-field--error .lui-select { border-color: var(--danger-500); }
.lui-field--error .lui-help { color: var(--danger-500); }

/* checkbox + radio (custom) */
.lui-check { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: var(--text-sm); color: var(--text-primary); }
.lui-check input { position: absolute; opacity: 0; width: 0; height: 0; }
.lui-check .box {
  width: 20px; height: 20px; flex: none; border: var(--border-w-thick) solid var(--border-strong);
  border-radius: var(--radius-sm); background: var(--white); display: grid; place-items: center;
  transition: background var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard);
}
.lui-check .box.round { border-radius: var(--radius-pill); }
.lui-check .box svg { width: 13px; height: 13px; stroke: #fff; opacity: 0; }
.lui-check input:checked + .box { background: var(--brand); border-color: var(--brand); }
.lui-check input:checked + .box svg { opacity: 1; }
.lui-check input:checked + .box .dot { width: 8px; height: 8px; border-radius: 50%; background: #fff; }
.lui-check input:focus-visible + .box { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* switch */
.lui-switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: var(--text-sm); color: var(--text-primary); }
.lui-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.lui-switch .track {
  width: 44px; height: 26px; border-radius: var(--radius-pill); background: var(--lui-teal-200);
  position: relative; transition: background var(--dur-med) var(--ease-standard); flex: none;
}
.lui-switch .track::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%;
  background: #fff; box-shadow: var(--shadow-xs); transition: transform var(--dur-med) var(--ease-emphasized);
}
.lui-switch input:checked + .track { background: var(--brand); }
.lui-switch input:checked + .track::after { transform: translateX(18px); }
.lui-switch input:focus-visible + .track { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* --------------------------------------------------------------- Cards */
.lui-card {
  background: var(--surface-page); border: var(--border-w) solid var(--border);
  border-radius: var(--radius-lg); overflow: hidden;
}
.lui-card--raised { border-color: transparent; box-shadow: var(--shadow-md); }
.lui-card--flat { border-radius: var(--radius-none); }
.lui-card__media { aspect-ratio: 4/3; background: var(--surface-muted); overflow: hidden; }
.lui-card__media img { width: 100%; height: 100%; object-fit: cover; }
.lui-card__body { padding: var(--space-5); display: flex; flex-direction: column; gap: 8px; }
.lui-card__title { font-size: var(--text-lg); font-weight: var(--fw-semibold); color: var(--text-strong); letter-spacing: -0.01em; }
.lui-card__text { font-size: var(--text-sm); color: var(--text-muted); line-height: var(--leading-normal); }
.lui-card__foot { padding: var(--space-4) var(--space-5); border-top: 1px solid var(--border-muted); display: flex; align-items: center; justify-content: space-between; }

/* --------------------------------------------------------------- Badges + tags */
.lui-badge {
  display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-2xs); font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
  padding: 4px 9px; border-radius: var(--radius-sm); background: var(--brand-tint); color: var(--brand-strong);
}
.lui-badge--solid { background: var(--brand); color: #fff; }
.lui-badge--outline { background: transparent; border: 1px solid var(--border-strong); color: var(--text-muted); }
.lui-badge--success { background: color-mix(in oklab, var(--success-500) 16%, #fff); color: var(--success-600); }
.lui-badge--dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

.lui-tag {
  display: inline-flex; align-items: center; gap: 7px; font-size: var(--text-sm); color: var(--text-primary);
  padding: 7px 14px; border-radius: var(--radius-pill); border: 1px solid var(--border-strong); background: var(--white);
  cursor: pointer; transition: border-color var(--dur-fast) var(--ease-standard), background var(--dur-fast) var(--ease-standard);
}
.lui-tag:hover { border-color: var(--brand); }
.lui-tag[aria-pressed="true"], .lui-tag--active { background: var(--brand); color: #fff; border-color: var(--brand); }

/* --------------------------------------------------------------- Accordion (details) */
.lui-accordion { border-top: 1px solid var(--border); }
.lui-accordion__item { border-bottom: 1px solid var(--border); }
.lui-accordion__item > summary {
  list-style: none; cursor: pointer; padding: 20px 4px; display: flex; align-items: center; justify-content: space-between;
  gap: 16px; font-size: var(--text-md); font-weight: var(--fw-medium); color: var(--text-strong);
}
.lui-accordion__item > summary::-webkit-details-marker { display: none; }
.lui-accordion__item > summary .ico { flex: none; transition: transform var(--dur-med) var(--ease-standard); color: var(--brand); }
.lui-accordion__item[open] > summary .ico { transform: rotate(45deg); }
.lui-accordion__panel { padding: 0 4px 22px; color: var(--text-muted); font-size: var(--text-sm); line-height: var(--leading-relaxed); max-width: 62ch; }

/* --------------------------------------------------------------- Steps */
.lui-steps { display: flex; gap: var(--space-6); counter-reset: step; }
.lui-step { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.lui-step__n {
  width: 34px; height: 34px; border-radius: 50%; border: var(--border-w-thick) solid var(--brand);
  color: var(--brand); font-weight: var(--fw-bold); font-size: var(--text-sm);
  display: grid; place-items: center;
}
.lui-step--done .lui-step__n { background: var(--brand); color: #fff; }
.lui-step__title { font-size: var(--text-base); font-weight: var(--fw-semibold); color: var(--text-strong); }
.lui-step__text { font-size: var(--text-sm); color: var(--text-muted); line-height: var(--leading-normal); }

/* --------------------------------------------------------------- Misc */
.lui-rule { height: 1px; background: var(--border); border: 0; margin: 0; }
.lui-rule--inverse { background: var(--border-inverse); }
.lui-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: var(--surface-muted); }